<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实现图片转动
最新推荐文章于 2024-05-25 09:57:54 发布