js复杂？插件运用不熟悉？教你用css动画实现轮播的两种方法

最新推荐文章于 2023-04-10 20:55:27 发布

意中人Crush

最新推荐文章于 2023-04-10 20:55:27 发布

阅读量192

点赞数 9

文章标签：动画 css javascript

本文链接：https://blog.csdn.net/qq_69555866/article/details/125318219

版权

1.了解与动画相关的函数

animation 动画
animation-name: ; 动画名字
animation-duration: ; 动画持续时间
animation-timing-function: ; 动画效果
animation-delay: ; 延迟时间
animation-iteration-count: ; 循环次数 infinite 无数次
animation-fill-mode: ; 最后停留位置
animation-play-state: ; 播放时暂停
在实际应用中我们可以直接在animation后面直接写我们想要的效果，不用一条一条设置，初学者可以一个一个试试哦！

2.第一种方法实现轮播

这种办法就是将每张轮播的图片定义一个个关键帧(包括开始时间与结束时间)，再添加移动效果实现轮播效果，话不多说上代码吧。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		   .wrapper{
			   width: 757px;
			   height: 500px;
			   overflow: hidden;
			   margin: 0 auto;
		   }
		   .box{
			   width:3028px;
			   animation: mybox 15s infinite;
		   }
		   .box img{
			   width: 757px;
			   height: 500px;
			   float: left;
		   }
		   
		   @keyframes mybox{
		   	  0%{
				  transform: translate(-0px);
			  }
			  10%,33.3%{
			  	 transform: translate(-757px);
			  }
			  40%,100%{
			  	 transform: translate(-1514px);
			  }
			 80%,100%{
			  	 transform: translate(-2271px);
			  }
		   }
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box">
				<img src="img/3.png" >
				<img src="img/4.png" >
				<img src="img/5.png" >
				<img src="img/3.png" >
			</div>
		</div>
	</body>
</html>

效果展示

总结

这种方式需要一个个设置关键帧，有一个过渡效果，但是要对图片进行计算。

3.第二种方法实现轮播

这种方法需要我们用到步进。

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width:757px;
				height:500px;
				overflow: hidden;
				margin:0 auto;
			}
			.box{
				width:2271px;
				animation:myfirst 5s infinite steps(3);
			}
			img{
				width: 757px;
				height: 500px;
				float:left;
			}
			@keyframes myfirst{
				from{
					transform: translate(0);
				}
				to{
					transform: translate(-2271px);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box">
				<img src="./img/3.png" alt="">
				<img src="./img/4.png" alt="">
				<img src="./img/5.png" alt="">
			</div>
		</div>
	</body>
</html>

效果展示