今天小编跟大家讲解下有关CSS3 animation实现简易幻灯片轮播特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 animation实现简易幻灯片轮播特效 的相关资料，希望小伙伴们看了有所帮助。
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>以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
