現在的前端,越來越注重使用者互動和體驗,有很多動畫和效果是很常見的,如本篇要講的主題:輪播動畫。這和以前常聽到的一個名詞–」跑馬燈「效果一樣。在CSS3出來之前,都是透過JavaScript實現的動畫,現在我們完全可以使用CSS3,效能有很大的提升,相容性也已經很不錯,尤其是行動裝置。
CSS3實現動畫效能會有極大提升,特別是當頁面動畫較多或定時器較多時。
html結構:
<h2>CSS实现</h2> <p class="wrapper-css"> <p class="container-css marquee"> <p>今天</p> <p>明天</p> <p>后天</p> <p>今天</p><!-- 辅助元素,为实现循环轮播 --> </p> </p>
可以看到,依然需要在後面加入一個重複輔助元素,實現循環輪播效果。
CSS程式碼:
// 轮播动画 @-webkit-keyframes marquee { 0% { -webkit-transform: translate3d(0, 0, 0); } 27% { -webkit-transform: translate3d(0, 0, 0); } 33% { -webkit-transform: translate3d(0, -100%, 0); } 60% { -webkit-transform: translate3d(0, -100%, 0); } 67% { -webkit-transform: translate3d(0, -200%, 0); } 94% { -webkit-transform: translate3d(0, -200%, 0); } 100% { -webkit-transform: translate3d(0, -300%, 0); } } @keyframes marquee { 0% { transform: translate3d(0, 0, 0); } /* 100/3 * (2s/2.5s) => 26.7% => 27% */ 27% { transform: translate3d(0, 0, 0); } /* 100/3 =>33.3 => 33% */ 33% { transform: translate3d(0, -100%, 0); } 60% { transform: translate3d(0, -100%, 0); } 67% { transform: translate3d(0, -200%, 0); } 94% { transform: translate3d(0, -200%, 0); } 100% { transform: translate3d(0, -300%, 0); } } .wrapper-css { width: 200px; height: 30px; margin: 10px; overflow: hidden; } .container-css { height: 30px; -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */ animation: marquee 7.5s linear infinite; } .container-css p { width: 100%; height: 30px; margin: 0; line-height: 30px; font-size: 18px; }
如上,我們使用CSS3定義動畫關鍵幀,並結合transform位移實現無縫輪播動畫,透過移動容器實現輪播效果,主要需要根據輪播元素計算動畫關鍵幀點
以上是CSS3實作輪播動畫程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!