码迷,mamicode.com
首页 > Web开发 > 详细

html+css实现图片转动

时间:2015-02-26 10:01:27      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:jquery   html5   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>
技术分享技术分享

html+css实现图片转动

标签:jquery   html5   css   图片   

原文地址:http://blog.csdn.net/u012651389/article/details/43940581

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!