这篇文章主要为大家详细介绍了css3 animation实现简易幻灯片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;
但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
立即学习“前端免费学习笔记（深入）”；
CSS3幻灯片 .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); } }
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于CSS3中常见transformation图形变化的用法
关于CSS3的animation实现逐帧动画效果
以上就是CSS3的animation实现简易幻灯片轮播特效的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610378.html
微信扫一扫 
支付宝扫一扫 
