html5怎么設(shè)置網(wǎng)頁過渡效果

在web設(shè)計(jì)中使用js可以實(shí)現(xiàn)很多的頁面特效，然而很多人卻忽視了HTML標(biāo)簽中META標(biāo)簽的強(qiáng)大功效，其實(shí)meta標(biāo)簽也可以實(shí)現(xiàn)很多漂亮的頁面過渡效果。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)莆田,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

META標(biāo)簽是HTML語言HEAD區(qū)的一個(gè)輔助性標(biāo)簽，Meta 標(biāo)簽放在每個(gè)網(wǎng)頁的head.../head

中間，我們大家比較熟悉的如：

meta name="GENERATOR" content="Microsoft FrontPage

3.0"http://說明編輯工具；

meta name="KEYWORDS" content="..."http://說明關(guān)鍵詞；

meta name="DESCRIPTION" content="..."http://說明主頁描述；

它提供用戶不可見的信息。meta標(biāo)簽通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設(shè)定頁面格式，標(biāo)注內(nèi)容提要和關(guān)鍵字；還可以設(shè)置頁面使其可以

根據(jù)你定義的時(shí)間間隔刷新自己,以及設(shè)置RASC內(nèi)容等級(jí)，等等

用法：

Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"

Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"

blendTrans是css動(dòng)態(tài)濾鏡的一種，產(chǎn)生漸隱效果。另一種動(dòng)態(tài)濾鏡RevealTrans也可以用于頁面進(jìn)入與退出效果:

動(dòng)態(tài)濾鏡可以為頁面添加動(dòng)人的淡入淡出、圖象轉(zhuǎn)化效果，它可以分為兩種blend（混合）和reveal（顯示），

前者可以使對(duì)象漸漸消失或出現(xiàn)，后者提供了24種圖象轉(zhuǎn)化的效果......

Meta http-equiv="Page-Enter"

Content="revealTrans(duration=x, transition=y)"

Meta

http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)"

Duration:表示濾鏡特效的持續(xù)時(shí)間(單位：秒)

Transition:濾鏡類型。表示使用哪種特效，取值為0-23。

推薦8款HTML5相關(guān)的特殊效果 看看都能夠?qū)崿F(xiàn)哪些功能

HTML5是HTML的升級(jí)版，HTML5有兩大特點(diǎn)：首先，強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地?cái)?shù)據(jù)庫(kù)等 Web

應(yīng)用的功能。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。今天我們推薦8款使用HTML5生成的特

殊效果，希望可以對(duì)大家的使用帶來幫助!

HTML5實(shí)現(xiàn)的五子棋游戲

在線演示

這是一款使用HTML5實(shí)現(xiàn)的五子棋特效，與計(jì)算機(jī)的對(duì)局你不見得能次次都贏得勝利，不信可以點(diǎn)擊在線演示。

一款不需要視頻文件的視頻播放器-Frame player

在線演示

HTML5視頻是非常棒的，它可以很容易的用在多款設(shè)備上。但是它也有自己的問題，比如移動(dòng)設(shè)備的播放器，可能有不同版本不兼容的情況。今天我們介紹這款視頻播放器完善了之前的效果，用起來更方便。希望大家喜歡!

3D菜單

在線演示

或許在現(xiàn)如今這個(gè)科技發(fā)達(dá)的時(shí)代，在線點(diǎn)餐已不是新鮮事。餐廳可以對(duì)Menu進(jìn)行設(shè)計(jì)，點(diǎn)擊菜名會(huì)相應(yīng)彈出菜品的照片，或者還可以增加卡路里，原材料和客戶們的評(píng)價(jià)等。絕對(duì)是一個(gè)超時(shí)髦的創(chuàng)意!

用HTML5的畫布實(shí)現(xiàn)撕布的動(dòng)畫效果

在線演示

用HTML5的畫布實(shí)現(xiàn)撕布的效果，滑動(dòng)鼠標(biāo)，布會(huì)隨著鼠標(biāo)變動(dòng)。點(diǎn)擊鼠標(biāo)左鍵，然后滑動(dòng)鼠標(biāo)，布就會(huì)被割開。如果你還沒有查看過這款演示效果，那絕對(duì)逼真的讓你震撼!

HTML5 Canvas(畫布) 基礎(chǔ)使用和介紹

在線下載

還記得在過去的Web前端開發(fā)中，如果你需要繪圖或者生成相關(guān)圖形的話，使用Flash可能是你唯一或者說最強(qiáng)大的實(shí)現(xiàn)方式，而在近些年的技術(shù)

熱點(diǎn)HTML5標(biāo)準(zhǔn)中，HTML

Canvas(畫布)能夠更加方便的幫助你實(shí)現(xiàn)2D繪制圖形圖像及其各種動(dòng)畫效果功能。在今天的這篇技術(shù)教程中我們將介紹基本的Canvas使用，希望大

家覺得有幫助!

HTML5畫布生成的2D光源效果

在線演示

超金屬的背景，仿佛探照燈的經(jīng)過讓他看上去更加的立體。這是一款使用HTML5 Canvas生成的2D光源效果。絕對(duì)讓你不后悔使用它!

HTML5的Flappy bird實(shí)現(xiàn)

在線演示

著名的Flappy Bird，相信知道的人一定不少吧，點(diǎn)擊你的空格，不要讓它掉下來，看看你最終的成績(jī)有多好。發(fā)上來我們切磋一下吧.

Sonic - 循環(huán)加載的利器

在線演示1 在線演示2 在線演示3

Sonic是一個(gè)不到3k，非常小的JS類庫(kù)，你可以用這個(gè)類庫(kù)來創(chuàng)建自定義的加載動(dòng)畫。它的循環(huán)動(dòng)畫效果非常贊，比如你可以用它做一條不斷追

逐自己尾巴

的蛇，這樣的動(dòng)畫。Sonic使用了HTML5的canvas元素和其相關(guān)API。它基于在一定小的時(shí)間間隔上，基于預(yù)定義的路徑，畫出下一個(gè)形狀，從而

完成動(dòng)畫效果。你可以使用arc，bezier，或line的方法來定義路徑。

HTML5如何在網(wǎng)頁中實(shí)現(xiàn)3D效果

CSS3除了為開發(fā)者提供二維變形之外，還將動(dòng)畫從二維平面推動(dòng)到了三維立體狀態(tài)，能夠?qū)崿F(xiàn)真正的三維特效。

三維變形和二維變形一樣，均使用的是transform屬性。想要觸發(fā)三維變形有兩種方式：一種方式是通過語法告知瀏覽器“請(qǐng)采用三維方式進(jìn)行變形處理”，另一種方式是直接使用CSS3三維變形的語法。

觸發(fā)方法1：告知瀏覽器變形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三維變形，在移動(dòng)端，絕大多數(shù)的瀏覽器均為WebKit內(nèi)核，因此，在此句代碼之前需要書寫-webkit-的前綴內(nèi)核。

Tips：不要為body元素設(shè)置-webkit- transform-style: preserve 3d,否則會(huì)對(duì)position:fixed定位的元素造成布局影響。在開發(fā)當(dāng)中，如果當(dāng)前元素屬于body的子級(jí)元素，又希望應(yīng)用三維變形，則在body和當(dāng)前元素之間多嵌套一層結(jié)構(gòu)，并為這層元素應(yīng)用三維變形即可。

觸發(fā)方法2：直接使用CSS3變形語法

!DOCTYPE?html

head

meta?charset="UTF-8"

title言成科技/title

style

.box1?{

width:?150px;

height:?150px;

border:?2px?solid?blue;

}

.box1?div?{

height:?150px;

background:?rgba(0,?0,?0,?0.5);

-webkit-transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);

transform:?translate3d(30px,?60px,?20px)?rotateX(30deg);

}

/style

/head

body

div?class="box1"

div/div

/div

/body

/html

具體三維變形的具體屬性詳見《CSS3-3D相關(guān)知識(shí)詳解—視角以及變形方向》

3D效果制作

需求

制作一個(gè)立方體，并進(jìn)行旋轉(zhuǎn)

代碼實(shí)例

!DOCTYPE?HTML

html

head

meta?charset="utf-8"?/

title言成科技/title

link?rel="stylesheet"?type="text/css"?href=""?/

style

.main-bac?{?-webkit-perspective:1500;?}?/*設(shè)定透視距離*/

.main{

width:200px;?

height:200px;?

margin:?0?auto;

position:relative;

-webkit-transform-style:preserve-3d;

-webkit-transition:-webkit-transform?2s?ease?0s;/*過渡時(shí)間*/

}

/*基本樣式*/

.main?p{

position:?absolute;?

margin:?0;?

padding:?0;?

width:?200px;?

height:?200px;??

text-align:?center;?

line-height:?200px;?

font-size:?26px;?

opacity:0.5;

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，形成第一個(gè)面（正面）*/

.main?p:nth-of-type(1)?{

background-color:red;

-webkit-transform:translateZ(100px);

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)90度形成上面的面*/

.main?p:nth-of-type(2)?{

background-color:orange;?

-webkit-transform:rotateX(90deg)?translateZ(100px);

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞x軸旋轉(zhuǎn)-90度形成下邊的面*/

.main?p:nth-of-type(3)?{

background-color:yellow;

-webkit-transform:rotateX(-90deg)?translateZ(100px);

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)90度形成右側(cè)的面*/

.main?p:nth-of-type(4)?{

background-color:green;

-webkit-transform:rotateY(90deg)?translateZ(100px);

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)-90度形成左側(cè)的面*/

.main?p:nth-of-type(5)?{

background-color:#b435bf;

-webkit-transform:rotateY(-90deg)?translateZ(100px);

}

/*將第一個(gè)元素Z軸向前移動(dòng)100px，繞y軸旋轉(zhuǎn)180度形成后面（背面）*/

.main?p:nth-of-type(6)?{

background-color:blue;

-webkit-transform:rotateY(180deg)?translateZ(100px);

}

/*鼠標(biāo)移入時(shí)繞Y軸旋轉(zhuǎn)180度，繞Z軸旋轉(zhuǎn)180度*/

.main:hover?{-webkit-transform:rotateY(180deg)?rotateZ(180deg);?}???

/style

/head

body

div?class="main-bac"

div?class="main"

p言成科技/p

p3D立方體/p

pHTML5學(xué)堂/p

p3D立方體/p

p碼匠/p

pJavaScript/p

/div??????????????

/div

/body

/html

代碼解析

當(dāng)鼠標(biāo)移入的時(shí)候，立方體逐漸的發(fā)生旋轉(zhuǎn)（非突變），圍繞X軸旋轉(zhuǎn)45度的同時(shí)，圍繞Y軸旋轉(zhuǎn)45度。

當(dāng)鼠標(biāo)移出立方體時(shí)，立方體恢復(fù)到初始狀態(tài)。在最開始狀態(tài)時(shí)，并沒有采用無限遠(yuǎn)的視角，設(shè)置一定的視角，讓剛開始時(shí)直視立方體時(shí)，不會(huì)覺得是一個(gè)平面。

3D效果制作-目標(biāo)效果圖

以上資料來源：《HTML5布局之路》

新聞名稱：html5特效網(wǎng),html5特效代碼免費(fèi)
標(biāo)題鏈接：http://aaarwkj.com/article32/dsisepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、搜索引擎優(yōu)化、標(biāo)簽優(yōu)化、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)