溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

發(fā)布時(shí)間：2021-06-29 09:38:32 來源：億速云 閱讀：162 作者：小新 欄目：web開發(fā)

小編給大家分享一下CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

實(shí)現(xiàn)如圖所示的動(dòng)畫效果：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

預(yù)載動(dòng)畫一：雙旋圈

在兩個(gè)不同方向旋轉(zhuǎn)的圓圈。我們對(duì)內(nèi)圈的轉(zhuǎn)速定義了一個(gè)CSS代碼，即內(nèi)圈比外圈的速率快2倍。
 

實(shí)現(xiàn)如圖所示：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

html代碼：

<body style="background: #ffb83c;">
    <div id="preloader-1">
        <span></span>
        <span></span>
    </div>
</body>

css代碼：

#preloader-1{
    position: relative;
}
#preloader-1 span{
    position: absolute;
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius: 999px;
}
#preloader-1 span:nth-child(1){
    width:80px;
    height: 80px;
    animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
    top:20px;
    left:20px;
    width:40px;
    height: 40px;
    animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
    0%{transform: rotate(360deg); opacity: 1.0;}
    50%{transform: rotate(180deg); opacity: 0.5;}
    100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
    0%{transform: rotate(0deg); opacity: 0.5;}
    50%{transform: rotate(180deg); opacity: 1;}
    100%{transform: rotate(360deg);opacity: 0.5;}
}

預(yù)載動(dòng)畫二：交錯(cuò)圈

兩個(gè)圓圈進(jìn)行橫向交錯(cuò)來回移動(dòng)。每個(gè)圓圈都設(shè)置了單獨(dú)的反向移動(dòng)動(dòng)畫參數(shù)。
 

效果：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

html代碼：

<body style="background: #4ad3b4;">
    <div id="preloader-2">
        <span></span>
        <span></span>
    </div>
</body>

css代碼：

#preloader-2{
    position: relative;
}
#preloader-2 span{
    position: absolute;
    width:30px;
    height: 30px;
    background: #fff;
    border-radius: 999px;
}
#preloader-2 span:nth-child(1){
    animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
    animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
    0%{transform: translateX(0); opacity: 0.5;}
    50%{transform: translateX(80px); opacity: 1;}
    100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
    0%{transform: translateX(80px); opacity: 0.5;}
    50%{transform: translateX(0); opacity: 1;}
    100%{transform: translateX(80px);opacity: 0.5;}
}

預(yù)載動(dòng)畫三：旋轉(zhuǎn)圈

效果：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

html代碼：

<body style="background: #ab69d9;">
    <div id="preloader-3">
        <span></span>
    </div>
</body>

css代碼：

#preloader-3{
    position: relative;
    width:80px;
    height: 80px;
    border:4px solid rgba(255,255,255,.25);
    border-radius: 999px;
    
}
#preloader-3 span{
    position: absolute;
    width:80px;
    height:80px;
    border:4px solid transparent;
    border-top:4px solid #fff;
    border-radius: 999px;
    top:-4px;
    left:-4px;
    animation: rotate 1s infinite linear;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

預(yù)載動(dòng)畫四：跳動(dòng)圈

這是一種墨西哥波浪紋的動(dòng)畫效果，通過設(shè)置不同圓圈之間的延遲參數(shù)來實(shí)現(xiàn)。
 

效果：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

html代碼：

<body style="background: #c1d64a;">
    <div id="preloader-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css代碼：

#preloader-4{
    position: relative;
}
#preloader-4 span{
    position:absolute;
    width:16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
    left:0;
    animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
    left:20px;
    animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
    left:40px;
    animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
    left:60px;
    animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
    left:80px;
    animation-delay: 1.0s;
}
@keyframes bounce{
    0%{transform: translateY(0px);opacity: 0.5;}
    50%{transform: translateY(-30px);opacity: 1.0;}
    100%{transform: translateY(0px);opacity: 0.5;}
}

預(yù)載動(dòng)畫五：雷達(dá)圈

一種雷達(dá)輻射效果，給3個(gè)span elements設(shè)置相同的淡入淡出效果，再予每個(gè)稍微延遲下即可實(shí)現(xiàn)。
 

效果：

CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果

html代碼：

<body style="background: #f9553f;">
    <div id="preloader-5">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

css代碼：

#preloader-5{
    position: relative;
}
#preloader-5 span{
    position:absolute;
    width:50px;
    height: 50px;
    border:5px solid #fff;
    border-radius: 999px;
    opacity: 0;
    animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
    animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
    
    animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
    animation-delay: 1.33s;
}

@keyframes radar{
    0%{transform: scale(0);opacity: 0;}
    25%{transform: scale(0);opacity: 0.5;}
    50%{transform: scale(1);opacity: 1.0;}
    75%{transform: scale(1.5);opacity: 0.5;}
    100%{transform: scale(2);opacity: 0;}
}

以上是“CSS3如何實(shí)現(xiàn)預(yù)載動(dòng)畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手