<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" target="_blank" rel="external nofollow" >-->
<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>
html+css实现图片流动 
html+css实现图片流动 
