css3 中實(shí)現(xiàn)炫酷的loading效果

•今天實(shí)現(xiàn)了一個(gè)炫酷的loading效果,基本全用css來實(shí)現(xiàn),主要練習(xí)一下css3的熟練運(yùn)用
•js需要引入jquery 只用到了一點(diǎn)點(diǎn)js
•先看效果圖
html:
<div class="box"> <div class="master"> <div class="eyes"> <div class="eyes-ball"></div> </div> <div class="mouth"></div> </div> <div class="master blue"> <div class="eyes"> <div class="eyes-ball"></div> </div> <div class="mouth"></div> </div> </div> <div class="model"> <div class="master"> <div class="eyes"> <div class="eyes-ball"></div> </div> <div class="mouth"></div> </div> <div class="loading"> <div class="loading-bar"></div> </div> <div class="jz-loading">加載中 . . .</div> </div>
css:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: hsla(0, 100%, 80%, 0.5); display: flex; justify-content: center; align-items:center; } .box{ display: flex; } .master{ width:110px; height:100px; border-radius: 20px; background: red; margin:10px; display: flex; justify-content: center; align-items:center; flex-direction: column; box-shadow: 0 10px 20px rgba(0,0,0,.5); position: relative; animation: jumping 0.8s infinite; transition: all 0.5s; } .master .eyes{ width:35%; height:35%; border-radius:50%; background-color:#fff; display: flex; justify-content: center; align-items:center; } .eyes-ball{ width:30%; height:30%; border-radius: 50%; background-color: #000; animation: eyesmove 1.6s linear infinite alternate; } .master .mouth{ width:40%; height:10px; border-radius:12px; background-color:blue; margin-top: 20px; } .master.blue{ background-color: blue; animation-delay: 0.4s; } .master.blue .mouth{ background: red; } .master::before, .master::after{ content:''; display: block; width: 12px; height: 20px; border-radius: 12px 12px 0 0; background: #fff; position: absolute; top: -15px; transform: translateX(-6px) rotate(45deg); transform-origin: 100% 100%; } .master::after{ transform:translateX(6px) rotate(-45deg); transform-origin: 0 100%; } /*****遮罩層*****/ .model{ position: fixed; width: 100%; height: 100%; background: palevioletred; display: flex; justify-content: center; align-items: center; flex-direction: column; } .loading{ width: 200px; height: 10px; border-radius:12px; background-color: #fff; margin-top: 50px; overflow: hidden; } .loading .loading-bar{ width: 0%; height: 10px; background: red; } .jz-loading{ color: blue; font-weight: bold; position: absolute; top: 50%; transform: translateY(100px); } .move{ transform: scale(0.1) rotate(360deg); } /*****動(dòng)畫*****/ @keyframes jumping{ 0%{ top:0; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } 50%{ top:-50px; box-shadow: 0 100px 20px rgba(0, 0, 0, .3); } 100%{ top:0; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); } } @keyframes eyesmove{ 0%{ transform: translateX(-100%); } 10%{ transform: translateX(-100%); } 90%{ transform: translateX(100%); } 100%{ transform: translateX(100%); } }
js:
var timer =null; var add =0; timer=setInterval(()=>{ add++; $('.loading-bar').css('width',`${add}%`); if(add>=100){ $('.model .master').addClass('move'); $('.model').fadeOut(); clearInterval(timer); timer =null; } },30)
總結(jié)
以上所述是小編給大家介紹的css3 中實(shí)現(xiàn)炫酷的loading效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
CSS3實(shí)現(xiàn)兩款炫酷的loading預(yù)加載樣式
這是一個(gè)實(shí)現(xiàn)兩款炫酷的css3 loading預(yù)加載樣式,通過簡單的布局和CSS代碼,來制作效果非常炫酷的loading預(yù)加載特效,歡迎下載2019-01-31CSS3實(shí)現(xiàn)炫酷loading預(yù)加載動(dòng)畫特效 4種
這是一組超酷的CSS3 loading加載動(dòng)畫特效,共有4種不同的效果,分別通過不同的CSS3 keyframes幀動(dòng)畫來完成,歡迎下載2019-01-08純CSS3實(shí)現(xiàn)漩渦樣式的Loading加載動(dòng)畫特效
今天給大家分享的是一款漩渦樣式的CSS3 Loading加載動(dòng)畫,它在加載的時(shí)候就像一個(gè)炫酷在旋轉(zhuǎn),同時(shí)中間有一個(gè)loading字樣表示在加載內(nèi)容。有需要的朋友可以直接下載使用2018-12-03純CSS3實(shí)現(xiàn)方塊翻轉(zhuǎn)效果的Loading加載動(dòng)畫效果
這是一款基于純CSS3實(shí)現(xiàn)的方塊翻轉(zhuǎn)效果的Loading加載動(dòng)畫,若干個(gè)小方塊組成一個(gè)陣列,然后各自按指定方向翻轉(zhuǎn),這樣循環(huán)后就形成了Loading加載的動(dòng)畫效果。有需要的朋友可2018-11-29- css3繪制六邊形縮放加載動(dòng)畫特效。有需要的朋友可以直接下載使用2018-11-01
- css3繪制彩虹彈簧式加載效果代碼。有需要的朋友可以直接下載使用2018-09-25
CSS3+SVG實(shí)現(xiàn)S形進(jìn)度條加載動(dòng)畫效果源碼
這是一款基于CSS3+SVG實(shí)現(xiàn)S形進(jìn)度條加載動(dòng)畫效果源碼。畫面中一個(gè)類似蛇形管道的S形狀進(jìn)度條呈現(xiàn)出從左上方0%進(jìn)度加載過渡到100%的進(jìn)度。并如此循環(huán)往復(fù)2018-07-09純CSS3模擬Windows XP開機(jī)加載動(dòng)畫界面loading效果源碼
這是一款基于純CSS3模擬Windows XP開機(jī)加載動(dòng)畫界面loading效果源碼。采用純css3模擬出Windows XP開機(jī)啟動(dòng)時(shí)的logo圖標(biāo)與底部進(jìn)度條滾動(dòng)加載的動(dòng)畫效果2018-07-06純css3實(shí)現(xiàn)炫酷谷歌loading圖標(biāo)加載動(dòng)畫特效源碼
純css3繪制扁平化的谷歌loading加載圖標(biāo)動(dòng)畫特效。圖標(biāo)有六個(gè)大小顏色各異,非常炫酷。有需要的朋友可以直接下載使用2018-07-06