CSS3 Loading Page Animation - CSS Animation Effects - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Loading Page Animation đơn giản nhưng không khó để thực hiện được.
<div id="loading-page">
    <div class="square">
        <span></span> 
        <span></span>
        <span></span>

        <span></span>
        <span></span>
        <span></span>

        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

#loading-page {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50vh;
    width: 100%;
    .square {
        width: 100px;
        height: 100px;
        border: 5px solid #262626;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
        span {
            width: calc(100% / 3);
            height: calc(100% / 3);
            background: #262626;
            display: block;
            float: left;
            -webkit-animation: loading 2s linear infinite;
                    animation: loading 2s linear infinite;
            &amp;:nth-child(3) {
                -webkit-animation-delay: 0.8s;
                        animation-delay: 0.8s;
            }
            &amp;:nth-child(2),
            &amp;:nth-child(6) {
                -webkit-animation-delay: 0.6s;
                        animation-delay: 0.6s;
            }
            &amp;:nth-child(1),
            &amp;:nth-child(5),
            &amp;:nth-child(9) {
                -webkit-animation-delay: 0.4s;
                        animation-delay: 0.4s;
            }
            &amp;:nth-child(4),
            &amp;:nth-child(8) {
                -webkit-animation-delay: 0.2s;
                        animation-delay: 0.2s;
            }
            &amp;:nth-child(7) {
                -webkit-animation-delay: 0s;
                        animation-delay: 0s;
            }
        }
    }
}
@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    50% {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    75% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}
@keyframes loading {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    50% {
        -webkit-transform: scale(0);
                transform: scale(0);
    }
    75% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

0 thảo luận về CSS3 Loading Page Animation - CSS Animation Effects - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục