Home > Article > Web Front-end > The first css hover effect_html/css_WEB-ITnose
The first css hover effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:32930browse
Today I saw an interesting open source CSS hover effect and tried it out
Demo: http://gudh.github.io/ ihover/dist/index.html
Github Repo is here: https://github.com/gudh/ihover
Article address: http://www. html-js.com/topic/274
This is the first effect I copied, and it feels okay:
Start
Go!
You are about to enter Alfred’s personal blog
The following is the source code which is relatively simple (at least it is easier than analyzing the source code on open source by yourself) To be simple) I won’t analyze them one by one:
<!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