<!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" style="max-width:90%" height="300px"/ alt="Hover图片旋转_html/css_WEB-ITnose" > <span class="caption"> <p>圈圈转起来</p> </span> </a> </div> </body></html>
如图:
