<!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>
如图:
Bagaimana untuk menyelesaikan laporan ralat
Sistem oa mana yang lebih baik?
Apakah yang perlu saya lakukan jika tetikus berhenti bergerak?
Muat turun perisian dagangan Yiou
Apakah perbezaan antara mesin demo dan mesin sebenar?
Cara menggunakan fungsi datediff
kemas kini automatik windows
MySQL memadam prosedur tersimpan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
