博客园第一篇———css hover奇效

博客园第一篇———css hover特效

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

博客园第一篇———css hover奇效

相关推荐