> 웹 프론트엔드 > HTML 튜토리얼 > 第一篇css hover特效_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:42:32
원래의
935명이 탐색했습니다.

今天看到了一个比较有趣的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>
로그인 후 복사

 

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿