Css跑马灯/步进图/轮播图

关注

原创 2022-03-17 21:48:33 1.1k 阅读 AI 写同款· GEO 优化 ›

探究前端的跑马灯效果是如何用css实现的无意见看到了一个网站的一个动画的跑马灯效果很不错，这篇博客将用css实现跑马灯效果，剖析它是如何实现的！并且我也推荐用css实现这种无缝滚动的跑马灯，效果看起来更平滑，用js定时器实现的会有明显的抖动效果！阅读详情

这里两种跑马灯的不同，我们可以看一下。这也是轮播图的两种基础方式，我们可以直接把里面的div换成我们想要轮播的图片复制代码，轮播图就完成了，我们可以明显看到两种方式的不同，一种是轮着转，还有一种我称为“闪播图”，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
        //所有div设置
			.wrapper div{
				width: 200px;
				height: 200px;
				border-left: 1px solid red;
				background-color: lightgreen;
				float: left;
			}
			//第一个div前面的隐藏元素设置，就是“马”
			.wrapper div:nth-of-type(1)::before{
				content: "中奖";
				display: block;
				width: 200px;
				height: 200px;
				background-color: lightcoral;
				animation: mybox 4s infinite;
			}
			    //    关键帧设置
			@keyframes mybox{
				0%{
					transform: translateX(0);
				}
				25%{
					transform: translateX(200px);
				}
				50%{
					transform: translateX(400px);
				}
				75%{
					transform: translateX(600px);
				}
				
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
            //div设置
			.wrapper div{
				width: 200px;
				height: 200px;
				border-left: 1px solid red;
				background-color: lightgreen;
				float: left;
			}
			
			.wrapper div:nth-of-type(1)::before{
				content: "中奖";
				display: block;
				width: 200px;
				height: 200px;
				background-color: lightcoral;
                /* start 第一帧是第一步动画结束
				   end  第一帧是第一步动画开始,默认为end 
				*/
				/* steps(1,start) 等价于 step-start */
				/* steps(1,end) 等价于 step-end */
				/* animation: mybox 3s steps(4,end); */
				animation: mybox 4s step-end infinite;
			}
			
			@keyframes mybox{
				0%{
					transform: translateX(0);
				}
				25%{
					transform: translateX(200px);
				}
				50%{
					transform: translateX(400px);
				}
				75%{
					transform: translateX(600px);
				}
				
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
		</div>
	</body>
</html>