HTML5+纯CSS实现图片轮播

编程语言 12/25 阅读 406 views次 人气 0
摘要:

下面是可执行的代码案例:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.box{
				position:absolute;
				width:20px;
				height:20px;
				background:grey;
				color:white;
				text-align:center;
				font-family:Microsoft Yahei;
			}
			#move1{
				bottom:0;
				left:240px;
				animation:change1 10s ease-out infinite;
			}
			#move2{
				bottom:0;
				left:260px;
				animation:change2 10s ease-out infinite;
			}
			#move3{
				bottom:0;
				left:280px;
				animation:change3 10s ease-out infinite;
			}
			#frame{
				position:absolute;
				width:300px;
				height:200px;
				overflow:hidden;
			}
			#photos img{
				float:left;
				width:300px;
				height:200px;
			}
			#photos{
				position:relative;
				width:900px; 
				animation:actions 10s ease-out infinite;
			}
			@keyframes actions{
				0%,30%{margin-left:0px;}
				35%,65%{margin-left:-300px;}
				70%,100%{margin-left:-600px;}
			}
			@keyframes change1{
				0%,30%{background:red;}
				35%,65%{background:grey;}
				70%,100%{background:grey;}
			}
			@keyframes change2{
				0%,30%{background:grey;}
				35%,65%{background:red;}
				70%,100%{background:grey;}
			}
			@keyframes change3{
				0%,30%{background:grey;}
				35%,65%{background:grey;}
				70%,100%{background:red;}
			}
		</style>
	</head>
	<body>
		<div id="frame">
			<div id="photos">
				<img id="img1" src="images/background1.png">
				<img id="img2" src="images/background2.png">
				<img id="img3" src="images/background3.png">
			</div>
			<div class="box" id="move1">1</div>
			<div class="box" id="move2">2</div>
			<div class="box" id="move3">3</div>
		</div>
	</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

小奋斗文章

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

评论

该文章不支持评论!

分享到: