今天看到了一个比较有趣的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>
转载于:https://www.cnblogs.com/AlfredMou/p/4590627.html
相关资源：JAVA上百实例源码以及开源项目