CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;
但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS3幻灯片</title> <styletype="text/css"media="screen"> .items{ width:280px; height:150px; border:1pxsolid#ddd; box-sizing:border-box; border-radius:10px; background-size:cover; -webkit-transform:translateZ(0); transform:translateZ(0); background-repeat:no-repeat; -webkit-animation:slider15slinearinfinitealternate; animation:slider15slinearinfinitealternate; -webkit-transform-origin:centercenter; transform-origin:centercenter; } @-webkit-keyframesslider{ 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); } } @keyframesslider{ 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> <divclass="slider"> <divclass="items"></div> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【CSS3 animation实现简易幻灯片轮播特效】相关文章：
★ CSS3 media queries + jQuery实现响应式导航
★ CSS3中动画属性transform、transition和animation属性的区别