第一篇css hover特效_html/css_WEB-ITnose-html教學-PHP中文網

第一篇css hover特效_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 11:42:32

原創

917 人瀏覽過

今天看到了一个比较有趣的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>

登入後複製