Home > Article > Web Front-end > 第一篇css hover特效_html/css_WEB-ITnose
第一篇css hover特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:32879browse
今天看到了一个比较有趣的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>
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：CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）_html/css_WEB-ITnoseNext article：CSS3系列一（概述、选择器、使用选择器插入内容）_html/css_WEB-ITnose