纯css制作简易轮播图（animation、keyFrame）

最新推荐文章于 2023-04-06 20:31:33 发布

imsopoor

最新推荐文章于 2023-04-06 20:31:33 发布

阅读量527

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/imsopoor/article/details/112775416

版权

主要是通过css3的动画及关键帧属性来设置图片的平移距离，以达到轮播图的效果

HTMl

<body>
		<div class="banner">
			<div class="box">
				<img src="img/1.jpg" alt="" />
				<img src="img/2.jpg" alt="" />
				<img src="img/3.jpg" alt="" />
				<img src="img/4.jpg" alt="" />
				<img src="img/5.jpg" alt="" />
			</dvi>
		</div>
	</body>

CSS

<style>
			body{
				padding: 0;
				margin: 0;
			}
			.banner{
				width: 800px;
				height: 450px;
				margin: 0px auto;
				overflow: hidden;
				/* /隐藏多余出来的图片 */
			}
			.box{
				width: 4000px;
				height: 450px;
				animation: mykey 10s 1s infinite alternate ;
				/* alternate是反向  infinite 是循环无限次 
				前面的秒一定是持续时间，后面的秒是延迟时间 */
			}
			.box:hover{
				animation-play-state: paused;
				/* 动画暂停 */
			}
			.box>img{
				float: left;
			}
			@keyframes mykey{
				
				25%{
					margin-left: -800px;
				}
				50%{
					margin-left: -1600px;
				}
				75%{
					margin-left: -2400px;
				}
				100%{
					margin-left: -3200px;
				}
				
			}
		</style>

效果图

在这里插入图片描述
需要注意的事，鼠标悬停事件下需要打：

	animation-play-state: paused;

在这里插入图片描述

而不是：

	animation: paused;

不然
在这里插入图片描述
最后也留下一个问题
“如何做到播放到最后一张图片后，立刻向左移动到第一张图片”

imsopoor

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
纯css制作简易轮播图（animation、keyFrame）

主要是通过css3的动画及关键帧属性来设置图片的平移距离，以达到轮播图的效果HTMl<body> <div class="banner"> <div class="box"> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img
复制链接

扫一扫