CSS实例——轮播

最新推荐文章于 2025-05-04 00:20:42 发布

এPlutus

最新推荐文章于 2025-05-04 00:20:42 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/shbk_/article/details/113418535

CSS 专栏收录该内容

18 篇文章

订阅专栏

animation动画

（！！！注意要让块级元素浮动起来）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div.outer{
			width: 400px;
			height: 200px;
			border: 1px solid red;
			margin: 100px auto;
			overflow: hidden;
		}


		div.content{
			width: 2000px;
			height: 200px;
			background-color: burlywood;
			
			animation-name: move;
			animation-duration: 10s;
			animation-iteration-count: infinite;
			animation-timing-function: steps(5);
		}


		div.content div{
			float: left;
			width: 400px;
			height: 200px;
		}

		@keyframes move{
			from{
				margin-left: 0px;
			}
			to{
				margin-left: -2000px;
			}
		}


	</style>
</head>
<body>
	<div class="outer">
		<div class="content">
			<div style="background-color: pink;"></div>
			<div style="background-color: greenyellow;"></div>
			<div style="background-color: yellow;"></div>
			<div style="background-color: red;"></div>
			<div style="background-color: skyblue;"></div>
		</div>
	</div>
</body>
</html>