매우 멋진 CSS3 로딩 애니메이션 효과-CSS 튜토리얼-php.cn

매우 멋진 CSS3 로딩 애니메이션 효과

黄舟

풀어 주다： 2017-01-19 14:05:57

원래의

1948명이 탐색했습니다.

간략한 튜토리얼

이것은 멋진 CSS3 로딩 애니메이션 효과입니다. 로딩 애니메이션은 CSS3 CSS3 애니메이션을 이용하여 제작되었습니다. 코드도 간단하고 효과도 아주 멋집니다.

사용법

HTML 구조

두 개의 하위 요소가 있는 로딩 애니메이션의 컨테이너로

요소를 사용합니다. 그 중 div.loading-1이 로딩 진행률 표시줄입니다. div.loading-2는 로딩 텍스트입니다.

<div class="loader">
    <div class="loading-1"></div>
    <div class="loading-2">Loading...</div>
</div>

로그인 후 복사

CSS 스타일

이 로딩 애니메이션에는 세 가지 애니메이션이 사용됩니다. 첫 번째 로딩 애니메이션은 진행률 표시줄을 0에서 100%로 이동하는 데 사용됩니다. 두 번째 회전 애니메이션은 진행률 표시줄을 Y축 방향으로 회전하는 데 사용됩니다. 세 번째 바운스 애니메이션은 텍스트 바운싱에 사용됩니다.

.loader {
    width: 150px;
    margin: 50px auto 70px;
    position: relative;
}
.loader .loading-1 {
    position: relative;
    width: 100%;
    height: 10px;
    border: 1px solid #69d2e7;
    border-radius: 10px;
    animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
    content: "";
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: #69d2e7;
    box-shadow: 10px 0px 15px 0px #69d2e7;
    animation: load 2s linear infinite;
}
.loader .loading-2 {
    width: 100%;
    position: absolute;
    top: 10px;
    color: #69d2e7;
    font-size: 22px;
    text-align: center;
    animation: bounce 2s  linear infinite;
}
@keyframes load {
    0% {
        width: 0%;
    }
    87.5%, 100% {
        width: 100%;
    }
}
@keyframes turn {
    0% {
        transform: rotateY(0deg);
    }
    6.25%, 50% {
        transform: rotateY(180deg);
    }
    56.25%, 100% {
        transform: rotateY(360deg);
    }
}
@keyframes bounce {
    0%,100% {
        top: 10px;
    }
    12.5% {
        top: 30px;
    }
}

로그인 후 복사

위 내용은 완전 멋진 CSS3 로딩 애니메이션 특수효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!