css做轮播图

最新推荐文章于 2024-07-25 08:14:42 发布

呵呵也不想呵呵

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量175

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_49213878/article/details/124396960

版权

CSS动画图片轮播无限循环悬浮暂停 HTML布局

关键词由CSDN通过智能技术生成

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width:100%;
				height:400px;
				/* background-color:red; */
				overflow:hidden;
			}
			.box2>img{
				width:1500px;
				height:400px;
				float:left;
			}
			.box2{
				width:6000px;
				height:400px;
				animation: myname 20s 5s infinite alternate;
			}
			@keyframes myname{
				35%{
					margin-left:-1500px;
					}
				70%{
					margin-left:-3000px;
					}
				100%{
					margin-left:-4500px;
				}	
			}
			.box2:hover{
				-webkit-animation: ;
				-o-animation: ;
				animation-play-state:paused;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<img src="./1.jpg" alt="">
				<img src="./2.png" alt="">
				<img src="./3%20(1).jpg" alt="">
				<img src="./4.jpg" alt="">
			</div>
		</div>
	</body>
</html>