今天看到了一个比较有趣的css hover效果的开源就试做了一下演示：http://gudh.github.io/ihover/dist/index.htmlGithub Repo在这里：https://github.com/gudh/ihover文章地址：http://www. ...
今天看到了一个比较有趣的css hover效果的开源就试做了一下
演示：http://gudh.github.io/ihover/dist/index.html
Github Repo在这里：https://github.com/gudh/ihover
文章地址：http://www.html-js.com/topic/274
这是我仿造的他的第一个效果做的，感觉还可以：
你即将进入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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：博客园第一篇———css hover特效
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
