導讀：是不是別人的網(wǎng)頁都在動？

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

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

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

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

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

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

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

2、變形transform

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

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

3、動畫animation

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

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

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

案例三：手機頁的H5展

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

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

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