Home >Web Front-end >HTML Tutorial >Hover图片旋转_html/css_WEB-ITnose
Hover图片旋转_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:31:591053browse
<!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>
如图:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnoseNext article：Marquee_html/css_WEB-ITnose