这篇文章主要为大家详细介绍了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中文网其他相关文章!