轮播动画简单实现现在的前端，越来越注重用户交互和体验，有很多动画和效果是很常见的，如本篇要讲的主题：轮播动画。这和以前经常听到的一个名词–”跑马灯“效果一样。在css3出来之前，都是通过javascript实现的动画，现在我们完全可以使用css3，性能有很大的提升，兼容性也已经很不错，尤其是移动端。
css3实现动画性能会有极大提升，特别是当页面动画较多或定时器较多时。
html结构：
<h2>css实现</h2>
<p class="wrapper-css">
<p class="container-css marquee">
<p>今天</p>
<p>明天</p>
<p>后天</p>
<p>今天</p><!-- 辅助元素，为实现循环轮播 -->
</p>
</p>
可以看到，依然需要在后面添加一个重复辅助元素，实现循环轮播效果。
css代码：
// 轮播动画
@-webkit-keyframes marquee {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
27% {
-webkit-transform: translate3d(0, 0, 0);
}
33% {
-webkit-transform: translate3d(0, -100%, 0);
}
60% {
-webkit-transform: translate3d(0, -100%, 0);
}
67% {
-webkit-transform: translate3d(0, -200%, 0);
}
94% {
-webkit-transform: translate3d(0, -200%, 0);
}
100% {
-webkit-transform: translate3d(0, -300%, 0);
}
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
/* 100/3 * (2s/2.5s) => 26.7% => 27% */
27% {
transform: translate3d(0, 0, 0);
}
/* 100/3 =>33.3 => 33% */
33% {
transform: translate3d(0, -100%, 0);
}
60% {
transform: translate3d(0, -100%, 0);
}
67% {
transform: translate3d(0, -200%, 0);
}
94% {
transform: translate3d(0, -200%, 0);
}
100% {
transform: translate3d(0, -300%, 0);
}
}
.wrapper-css {
width: 200px;
height: 30px;
margin: 10px;
overflow: hidden;
}
.container-css {
height: 30px;
-webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */
animation: marquee 7.5s linear infinite;
}
.container-css p {
width: 100%;
height: 30px;
margin: 0;
line-height: 30px;
font-size: 18px;
}
如上，我们使用css3定义动画关键帧，并结合transform位移实现无缝轮播动画，通过移动容器实现轮播效果，主要需要根据轮播元素计算动画关键帧点
以上就是css3实现轮播动画代码的详细内容。