<!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>
如图:
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
