블 로그 가든 1 편-css hover 효과

오늘 재 미 있 는 css hover 효과 의 시작 을 보고 해 봤 습 니 다.
데모
Github Repo 여기 있 습 니 다.
글 주소:http://www.html-js.com/topic/274
이것 은 내 가 모조 한 그의 첫 번 째 효과 로 만 든 것 으로 괜 찮 은 것 같다.



Start
Go!
너 는 곧 알 프 레 드 의 개인 블 로그 에 들 어 갈 것 이다.
다음은 소스 코드 가 비교적 간단 하 다(적어도 자신 이 소스 코드 를 분석 하 는 것 보다 간단 하 다)는 것 이다.

<!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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

CSS Hover 효과연습

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

블 로그 가든 1 편-css hover 효과

좋은 웹페이지 즐겨찾기