導(dǎo)讀：是不是別人的網(wǎng)頁(yè)都在動(dòng)？

是不是別人的網(wǎng)頁(yè)都有交互？

是不是別人的網(wǎng)頁(yè)做的像gif一樣？

作為一名設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候經(jīng)常需要讓頁(yè)面有漂亮的動(dòng)態(tài)效果，那就需要用到j(luò)s或者各種各樣的插件，又苦于不會(huì)js而瞬間就頭大，作為網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)老師的我在非凡學(xué)院從事教學(xué)的工作中，我們教授給學(xué)生的H5也能實(shí)現(xiàn)很多動(dòng)態(tài)效果，也能讓靜態(tài)頁(yè)面瞬間“活”起來，并且目前很多網(wǎng)頁(yè)設(shè)計(jì)的工作也都要求設(shè)計(jì)師會(huì)H5，話說對(duì)于前端人員來說不懂H5的設(shè)計(jì)師不是一位好隊(duì)友。

還有很多產(chǎn)品宣傳頁(yè)都只是展示內(nèi)容或者效果而無需做開發(fā)，這樣的對(duì)于會(huì)設(shè)計(jì)又會(huì)切圖的設(shè)計(jì)師需求就比較大，畢竟能一個(gè)人做好的工作，老板一般都不喜歡請(qǐng)兩個(gè)人浪費(fèi)人力物力財(cái)力，所以技能永遠(yuǎn)是升職加薪的捷徑。今天，非凡學(xué)院網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)專業(yè)的張老師，為大家分享一下；如何讓我們的網(wǎng)頁(yè)設(shè)計(jì)動(dòng)起來的。

那就來了解一下H5的動(dòng)態(tài)效果的分類

1、最基本的鼠標(biāo)經(jīng)過:hover

這個(gè)可適用于任何css樣式的操作，比如鼠標(biāo)經(jīng)過變顏色、變大小、變間距、變投影……，但有個(gè)缺點(diǎn)就是變化沒有過渡的效果，整個(gè)過程很生硬。

2、變形transform

變形主要分為四個(gè)方面：旋轉(zhuǎn)（rotate）、扭曲（skew）、縮放（scale）、位移（translate），利用這四種變形可以做很多漂亮的效果，很多時(shí)候配合:hover使用，當(dāng)然如果區(qū)別于:hover，還需要一點(diǎn)就是過渡屬性（Transition），加一句過渡使動(dòng)畫有了變化的過程，看起來更舒服更柔和，但相比之下也有個(gè)確點(diǎn)，就是只能在開始和結(jié)束兩個(gè)狀態(tài)中過渡，不能添加多個(gè)狀態(tài)。

案例一：下面兩個(gè)就是配合鼠標(biāo)經(jīng)過發(fā)生縮放，添加過渡效果。

3、動(dòng)畫animation

動(dòng)畫就是結(jié)合了以上兩種并加了自己的特色，就是可以添加多個(gè)狀態(tài)，也就是多個(gè)關(guān)鍵幀，能在多個(gè)狀態(tài)中進(jìn)行動(dòng)態(tài)效果，還可以控制播放的次數(shù)方向等，所以在復(fù)雜效果里動(dòng)畫用的比較多。

案例二：下面兩個(gè)就用到了變形中的位移和縮放，并且能夠進(jìn)行無限循環(huán)的動(dòng)畫效果。

H5兼容性比較好，手機(jī)端、PC端都基本都適用，一起來看下H5還能實(shí)現(xiàn)哪些令你驚艷的動(dòng)態(tài)效果吧！

案例三：手機(jī)頁(yè)的H5展

案例四：電腦端部分模塊的H5展示

所以，作為一名優(yōu)秀的設(shè)計(jì)師，尤其是網(wǎng)頁(yè)設(shè)計(jì)師，為了讓你的設(shè)計(jì)“活”起來，讓你的設(shè)計(jì)與人交互起來，非常有必要學(xué)習(xí)一下H5哦，來非凡，僅需一周，帶你玩遍H5所有動(dòng)效。

↓↓↓
總結(jié)：結(jié)果來源于自己的努力，要想自己有別人強(qiáng)，那就得自己努力，看完了 你覺得自己夠充實(shí)了嗎？如果沒有可以聯(lián)系我們的在線老師來非凡學(xué)習(xí)，如果還想了解更多可以點(diǎn)擊鏈接：http://wpml.com.cn/edu/feifanedu.html