Heim > Artikel > Web-Frontend > 第一篇css hover特效_html/css_WEB-ITnose
第一篇css hover特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:32931Durchsuche
今天看到了一个比较有趣的css hover效果的开源就试做了一下
演示：http://gudh.github.io/ihover/dist/index.html
Github Repo在这里：https://github.com/gudh/ihover
文章地址：http://www.html-js.com/topic/274
这是我仿造的他的第一个效果做的，感觉还可以：
Start
Go!
你即将进入Alfred的个人博客
以下是源码比较简单（至少比自己去分析开源上的源码要简单）就不一一解析了：
<!DOCTYPE html><html lang="en" ng-app="test"><head> <meta charset="UTF-8"> <title></title> <style> body{ text-align: center; font-family: "微软雅黑" } .border-label{ position: relative; width: 150px; height:150px; margin: auto; margin-top:150px; } .border-label:hover .border-change{ transform: rotate(180deg); } .border-label:hover .border-change-start{ display: none; } .border-label:hover .border-change-go{ display: block; } .border-change{ position: relative; width: 150px; height:150px; border-radius: 50%; border-width: 5px; border-style: solid; border-bottom-color: #ADFF2F; border-top-color: #9BCD9B; border-left-color: #9BCD9B; border-right-color: #ADFF2F; transition: all 0.8s ease-in-out; z-index: 2; cursor: pointer; } .border-change-context{ position: absolute; width: 150px; height: 150px; line-height:150px; text-align: center; left: 5px; top:5px; font-size: 50px; } .border-change-start{ color:#9BCD9B; } .border-change-go{ color:#ADFF2F; display: none; } .blog-head{ color:#ADFF2F; padding-top: 10px; padding-bottom: 10px; font-size: 20px; } </style></head><body > <div class="border-label"> <div class="border-change"> </div> <div class="border-change-context border-change-start"> Start </div> <div class="border-change-context border-change-go"> Go! </div> </div> <p class="blog-head">你即将进入Alfred的个人博客</p></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：CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）_html/css_WEB-ITnoseNächster Artikel：CSS3系列一（概述、选择器、使用选择器插入内容）_html/css_WEB-ITnose