学习web前端之css第七天

ysn121101

于 2019-08-12 20:07:59 发布

阅读量91

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ysn121101/article/details/99331373

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

轮播

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lunbo</title>
	<style>
	.container{
		width: 300px;
		height: 200px;
		border:1px solid #ccc;
		margin:0 auto;
		overflow: hidden;
		position: relative;
	}
	.pic{
		width: 1200px;
		height: 200px;
		position: absolute;
		animation-name: lunbo;
		animation-duration: 10s;
		animation-timing-function: steps(1);
		animation-iteration-count: infinite;

	}
	.pic div{
		width: 300px;
		height: 200px;
		float: left;

	}
	.pic div>img{
		width: 100%;
		height: 100%;
	}

	@keyframes lunbo{
		0%{
			left:0;
		}
		25%{
			left:-300px;
		}
		50%{
			left:-600px;
		}
		75%{
			left:-900px;
		}
		
	}

</style>
</head>
<body>
	<div class="container">
		<div class="pic">
			<div><img src="0.jpg" alt=""></div>
			<div><img src="1.jpg" alt=""></div>
			<div><img src="3.jpg" alt=""></div>
			<div><img src="dahai.jpg" alt=""></div>
		</div>
	</div>
</body>
</html>