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