html+css实现图片转动

<strong><span style="font-size:12px;"><!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">
	<style type="text/css">
		*{margin:0px 0px;padding: 0px 0px;}
		.main{width:1300px; height:740px;box-shadow:0px 0px 6px #000;
			margin:15px auto;position:relative;}
		.main .pic{width:720px;height:610px;/*border:2px solid #DDD;
			box-shadow:1px 1px 5px #000;*/border-radius:10px;
			float:left;position:absolute;top:20px ;left:20px;padding:30PX;}
		.main .pic a{display:block;width:176px;height:136px;
			border:2px solid #DDD;box-shadow:1px 1px 5px #FFF;
			overflow:hidden;;margin:25px;float:left;}
		.main .pic a:hover{box-shadow:3px 2px 8px #FFF;transform:rotate(360deg);transition:all 1800ms ease-out;}
	</style>
  </head>
  
  <body>
  	<div class="main">
  		<img src="img/00.jpg"width=1300px height=740px/>
  		<div class="pic">
  			<a class="topp"><img src="img/01.jpg" width=176px height=136px;/></a>
  			<a><img src="img/02.jpg" width=176px height=136px;/></a>
  			<a><img src="img/031.jpg" width=176px height=136px;/></a>
  			<a><img src="img/03.jpg" width=176px height=136px;/></a>
  			<a><img src="img/04.jpg" width=176px height=136px;/></a>
  			<a><img src="img/05.jpg" width=176px height=136px;/></a>
  			<a><img src="img/06.jpg" width=176px height=136px;/></a>
  			<a><img src="img/08.jpg" width=176px height=136px;/></a>
  			<a><img src="img/09.jpg" width=176px height=136px;/></a>
  		</div>
  	</div>
  </body>
</html>
</span></strong>
技术分享技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。