집 > 기사 > 웹 프론트엔드 > CSS3 전환 효과 사용 예 소개

CSS3 전환 효과 사용 예 소개

高洛峰원래의: 2017-03-13 17:47:001654검색

이 글은 주로 CSS3 전환 효과의 예시를 자세하게 소개하고 있으며, 관심 있는 친구들은 참고할 수 있습니다.

이 글은 CSS3 전환 효과를 모두와 공유합니다. 참고로 구체적인 내용은 다음과 같습니다.

렌더링:

CSS3 전환 효과 사용 예 소개

구현 코드:

transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>
    <style>
        #block {     
            width: 400px;     
            height: 300px;     
            background-color: #69C;     
            margin: 0 auto;     

            transition: background-color 1s, width 0.5s ease-out;     
            -webkit-transition: background-color 1s, width 0.5s ease-out;     
        }     
        #block:hover {     
            background-color: red;     
            width: 600px;     
        }     
    </style>
</head>
<body>
    <p id="block">

    </p>
</body>
</html>

transitionDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TransitionDemo</title>
    <style>
        #wrapper {     
            width: 1024px;     
            margin: 0 auto;     
        }     
        .progress-bar-bg {     
            width: 960px;     
            /*background-color: aliceblue;*/     
            background-color: lightyellow;     
        }     
        .progress-bar {     
            height: 40px;     
            width: 40px;     
            background-color: #69C;     

            border: 1px solid lightyellow;     
            border-radius: 5px;     
        }     
        .progress-bar:hover {     
            width: 960px;     
        }     

        #bar1 {     
            -webkit-transition: width 5s linear;     
            /*-webkit-transition: width 5s steps(6, end);*/     
            /*-webkit-transition: width 5s step-start;*/     
        }     
        #bar2 {     
            -webkit-transition: width 5s ease;     
        }     
        #bar3 {     
            -webkit-transition: width 5s ease-in;     
        }     
        #bar4 {     
            -webkit-transition: width 5s ease-out;     
        }     
        #bar5 {     
            -webkit-transition: width 5s ease-in-out;     
        }     
    </style>
</head>
<body>
<p id="wrapper">
    <p>linear</p>
    <p class="progress-bar-bg">
        <p class="progress-bar" id="bar1"></p>
    </p>

    <p>ease</p>
    <p class="progress-bar" id="bar2"></p>

    <p>ease-in</p>
    <p class="progress-bar" id="bar3"></p>

    <p>ease-out</p>
    <p class="progress-bar" id="bar4"></p>

    <p>ease-in-out</p>
    <p class="progress-bar" id="bar5"></p>
</p>
</body>
</html>

결과 분석: 마우스가 위로 이동한 후 전환 애니메이션이 발생합니다.

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS3 전환 효과 사용 예 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3 3D 회전 회전 효과 사용 예 소개다음 기사：CSS3 3D 회전 회전 효과 사용 예 소개