The first css hover effect_html/css_WEB-ITnose-HTML Tutorial-php.cn

The first css hover effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:42:32

Original

935 people have browsed it

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>

Copy after login