html+css实现图片流动
浏览数：22 /
时间：2015年06月09日
<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{margin:0px; padding:0px;}
body{ background:#ffb66c;}
div{width:960px ; height:270px ;border:10px solid #e93d68;
margin:120px auto ; border-radius:32px; box-shadow:2px 2px 15px #000000;
position:relative;overflow:hidden;}
ul{width:34800px; position:absolute; top:0px;
animation:mylist 5s linear infinite;}
ul li{list-style:none;width:230px;height:270px;
background:#ffb66c; float:left ;margin:0px 5px;}
ul:hover{animation-play-state:paused;cursor:pointer;}
ul li:hover img{transform:scale(0.8);}
@keyframes mylist{
from{left:0px;}
to{left:-1920px;}
}
</style>
</head>
<body>
<div >
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/7.jpg"></li>
<li><img src="img/8.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/7.jpg"></li>
<li><img src="img/8.jpg"></li>
</ul>
</div>
</body>
</html></strong>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
