css实现的一个简单的轮播图

最新推荐文章于 2024-04-27 13:06:52 发布

lzcge

最新推荐文章于 2024-04-27 13:06:52 发布

阅读量1.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_40553837/article/details/84110159

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css实现的一个轮播图

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>CSS3轮播图</title>
		<link rel="stylesheet" href="css/slide.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 1200px;
				height: 600px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			.photo {
				width: 7200px;
				animation: switch 12s ease-out infinite;
			}
			
			.photo>img {
				float: left;
				width: 1200px;
				height: 600px;
			}
			/*@keyframes 规则用于创建动画*/
			@keyframes switch {
				0%,
				10% {
					margin-left: 0;
				}
				20%,
				30% {
					margin-left: -1200px;
				}
				40%,
				50% {
					margin-left: -2400px;
				}
				60%,
				70% {
					margin-left: -3600px;
				}
				80%,
				90% {
					margin-left: -4800px;
				}
				99%,
				100% {
					margin-left: -6000px;
				}
			}
			/*http://www.w3school.com.cn/css3/css3_animation.asp*/
		</style>
	</head>

	<body>
		<div class="container">
			<div class="photo">
				<img src="img/link1.jpg" />
				<img src="img/link2.jpg" />
				<img src="img/link3.jpg" />
				<img src="img/link4.jpg" />
				<img src="img/link5.jpg" />
				<img src="img/link1.jpg" />
			</div>
		</div>
	</body>

</html>

lzcge

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
css实现的一个简单的轮播图

css实现的一个轮播图&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3轮播图&lt;/title&gt; &lt;link rel="stylesheet" href="css/slide.css
复制链接

扫一扫