點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

CSS3實現(xiàn)預載動畫效果的幾種方法

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 18:48:24

CSS3實現(xiàn)預載動畫效果的幾種方法

CSS3實現(xiàn)預載動畫效果的幾種方法:本篇文章主要介紹了CSS3動畫：5種預載動畫效果實例，內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。實現(xiàn)如圖所示的動畫效果：預載動畫一：雙旋圈在兩個不同方向旋轉(zhuǎn)的圓圈。我們對內(nèi)圈的轉(zhuǎn)速定義了一個CSS代碼，即內(nèi)圈比外圈的速率快2倍。實現(xiàn)如圖所示：

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS3實現(xiàn)預載動畫效果的幾種方法:本篇文章主要介紹了CSS3動畫：5種預載動畫效果實例，內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。實現(xiàn)如圖所示的動畫效果：預載動畫一：雙旋圈在兩個不同方向旋轉(zhuǎn)的圓圈。我們對內(nèi)圈的轉(zhuǎn)速定義了一個CSS代碼，即內(nèi)圈比外圈的速率快2倍。實現(xiàn)如圖所示：

本篇文章主要介紹了CSS3動畫：5種預載動畫效果實例，內(nèi)容挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。

實現(xiàn)如圖所示的動畫效果：

預載動畫一：雙旋圈

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

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

html代碼：

<body style="background: #ffb83c;">
 <p id="preloader-1">
 <span></span>
 <span></span>
 </p>
</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;}
}

預載動畫二：交錯圈

兩個圓圈進行橫向交錯來回移動。每個圓圈都設置了單獨的反向移動動畫參數(shù)。

效果：

html代碼：

<body style="background: #4ad3b4;">
 <p id="preloader-2">
 <span></span>
 <span></span>
 </p>
</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;}
}

預載動畫三：旋轉(zhuǎn)圈

效果：

html代碼：

<body style="background: #ab69d9;">
 <p id="preloader-3">
 <span></span>
 </p>
</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);}
}

預載動畫四：跳動圈

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

效果：

html代碼：

<body style="background: #c1d64a;">
 <p id="preloader-4">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </p>
</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;}
}

預載動畫五：雷達圈

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

效果：

html代碼：

<body style="background: #f9553f;">
 <p id="preloader-5">
 <span></span>
 <span></span>
 <span></span>
 </p>
</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;}
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS3實現(xiàn)預載動畫效果的幾種方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現(xiàn) 動畫效果 3個

熱門焦點

CSS3實現(xiàn)預載動畫效果的幾種方法

CSS3實現(xiàn)預載動畫效果的幾種方法

CSS3實現(xiàn)預載動畫效果的幾種方法

最新推薦

猜你喜歡

熱門推薦