H5與CSS3的發展已經深入每一個角落。除了它們的可靠性和整潔的語法結構外,它們的動畫效果同樣是值得關注的部分。
CSS3動畫實踐已經超出了單純的CSS動畫。CSS3動畫可以通過矢量以及各種屬性的組合實現更為復雜的動畫。同時,CSS允許對元素使用多個動畫。這些動畫可以通過改變顏色、字體、背景以及位置等等元素實現。有了這些,設計師可以將更復雜的思路變成更實現的動畫。
/* 例如,可以對一個元素做如下動畫 */ .box { width: 200px; height: 200px; background: #f00; position: relative; } .box:after { content: ''; width: 50px; height: 50px; background: #000; position: absolute; bottom: 0; right: 0; z-index: -1; animation: moving 3s ease-in-out infinite; } @keyframes moving { from { bottom: 0; right: 0; } to { bottom: 100px; right: 100px; } }
通過CSS動畫,您可以創建簡單的形狀自動旋轉、如鼠標滑過動畫、呼吸效果或完整的3D轉換。此外,可以使用HTML5 Canvas來創建令人眼花繚亂的動態效果。
H5與CSS3的代價相對來說較低,這樣設計師可以設計更多動畫細節而不會影響頁面的速度與性能。總而言之,H5和CSS3動畫是現代網站設計的必備部分。
上一篇css思季海棠酒店團購
下一篇css懸浮某個div底部