html图片轮播幻灯片,CSS3的animation实现简易幻灯片轮播特效

这篇文章主要为大家详细介绍了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实现逐帧动画效果