本篇內(nèi)容主要講解“CSS3怎么實(shí)現(xiàn)預(yù)載動畫效果”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS3怎么實(shí)現(xiàn)預(yù)載動畫效果”吧!
10年積累的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn),可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你,你也不認(rèn)識我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有臺山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
預(yù)載動畫一:雙旋圈
在兩個不同方向旋轉(zhuǎn)的圓圈。我們對內(nèi)圈的轉(zhuǎn)速定義了一個CSS代碼,即內(nèi)圈比外圈的速率快2倍。
實(shí)現(xiàn)如圖所示:
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ù)載動畫二:交錯圈
兩個圓圈進(jìn)行橫向交錯來回移動。每個圓圈都設(shè)置了單獨(dú)的反向移動動畫參數(shù)。
效果:
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ù)載動畫三:旋轉(zhuǎn)圈
效果:
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ù)載動畫四:跳動圈
這是一種墨西哥波浪紋的動畫效果,通過設(shè)置不同圓圈之間的延遲參數(shù)來實(shí)現(xiàn)。
效果:
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á)圈
一種雷達(dá)輻射效果,給3個span elements設(shè)置相同的淡入淡出效果,再予每個稍微延遲下即可實(shí)現(xiàn)。
效果:
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ù)載動畫效果”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
本文名稱:CSS3怎么實(shí)現(xiàn)預(yù)載動畫效果
當(dāng)前網(wǎng)址:http://m.newbst.com/article44/gdosee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、建站公司、定制開發(fā)、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)