你的位置:首页 > 网页设计

[网页设计]Hover图片旋转


<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键字"> <meta name="Description" content="描述"> <title>Hover图片旋转</title> <style type="text/css">  *{margin:0px; padding:0px;}  body{background:#eaeaea;}  .main{width:960px; margin:50px auto;}  .main a{display:block;width:300px;height:300px; border:5px solid #FFFFFF; box-shadow:1px 1px 1px #cccccc ,-1px -1px 3px #3a3a3a; position:relative; overflow:hidden; float:left; margin:10px;}  .caption{ position:absolute;background:rgba(0,0,0,0.3); color:#FFFFFF; left:0px; z-index:99; width:300px; line-height:30px; bottom:-30px;}  .caption p{text-align:center; font-size:12px;}  .main a:hover img{transition:all 800ms ease-out; transform:rotate(360deg);}  .main a:hover .caption{transition:all 300ms ease-out; transform:translateY(-100%);} </style> </head> <body>  <div class="main">    <a href="http://www.baidu.com">      <img src="Image/start.jpg" width="300px" height="300px"/>      <span class="caption">        <p>圈圈转起来</p>      </span>    </a>  </div> </body></html>

 

  如图: