Heim >Web-Frontend >HTML-Tutorial >Hover图片旋转_html/css_WEB-ITnose
Hover图片旋转_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:31:591054Durchsuche
<!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>
如图:
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnoseNächster Artikel：Marquee_html/css_WEB-ITnose