你的位置:首页 > 网页设计

[网页设计]博客园第一篇———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>