這篇文章主要為大家詳細介紹了CSS3 animation實現簡易幻燈片輪播特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下
CSS3有個別特性,可以觸發硬體GPU來加速渲染,而不是呼叫預設瀏覽器引擎渲染;
但是很多屬性,預設都是不開啟硬體加速的;需要觸發條件,一個最簡單的觸發條件就是使用3D屬性(對Z軸的操作)
效果圖
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3幻灯片</title> <style type="text/css" media="screen"> .items { width: 280px; height: 150px; border: 1px solid #ddd; box-sizing: border-box; border-radius:10px; background-size: cover; -webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; -webkit-animation: slider 15s linear infinite alternate; animation: slider 15s linear infinite alternate; -webkit-transform-origin: center center; transform-origin: center center; } @-webkit-keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } @keyframes slider { 0% { background-image: url(1.jpg) ; } 25% { background-image: url(2.jpg) ; } 50% { background-image: url(3.jpg) ; } 75% { background-image: url(4.jpg); } 100% { background-image: url(5.jpg); } } </style> </head> <body> <p class="slider"> <p class="items"></p> </p> </body> </html>
以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!
相關推薦:
關於CSS3中常見transformation圖形變化的用法
#
以上是CSS3的animation實現簡易幻燈片輪播特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!