CSS3有个别特性,可以触发 硬件 GPU来加速渲染,而不是调用 默认浏览器 引擎渲染;
但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最 简单 的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > < html lang = "en" > < head > < meta charset = "UTF-8" > < t IT le > CSS3幻灯片 </ title > < style type = "text/css" media = "screen" > .items { width: 280px; h ei ght: 150px; border: 1px solid # ddd; box -s izing: border-box; border-radius:10px; background-size : cover; - webkit -t ransform: translateZ(0); transform: translateZ(0); background-repeat: no-repeat; -webkit-animation: slider 15s linear infinite alternate; animation: slider 15s linear infinite alternate; -webkit-transform-ori gin : center center; transform-origin: center center; } @-webkit-keyfr am es slider { 0% { background -i mage: 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 > < div class = "slider" > < div class = "items" > </ div > </ div > </ body > </ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3 animation实现简易幻灯片轮播特效 全部内容，希望文章能够帮你解决 CSS3 animation实现简易幻灯片轮播特效 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3 animation实现简易幻灯片轮播特效的详细内容...