本篇文章主要介绍了"CSS3: animation实现简易幻灯片轮播"，主要涉及到animation方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
前言CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就...
前言
CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染;
但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(对Z轴的操作)
效果图
代码
<htmllang="en"><head><metacharset="UTF-8"><title>CSS3幻灯片title><styletype="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><divclass="slider"><divclass="items">div>div>body>html>
').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('
').text(i));
};
$numbering.fadeIn(1700);
});
});
以上就介绍了CSS3: animation实现简易幻灯片轮播，包括了animation方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_1042246.html
