css3 中實現(xiàn)炫酷的loading效果
發(fā)布時間:2019-04-26 11:08:41 作者:佚名
我要評論

今天實現(xiàn)了一個炫酷的loading效果,基本全用css來實現(xiàn),代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
•今天實現(xiàn)了一個炫酷的loading效果,基本全用css來實現(xiàn),主要練習一下css3的熟練運用
•js需要引入jquery 只用到了一點點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); } /*****動畫*****/ @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)
總結
以上所述是小編給大家介紹的css3 中實現(xiàn)炫酷的loading效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
- 這是一個實現(xiàn)兩款炫酷的css3 loading預加載樣式,通過簡單的布局和CSS代碼,來制作效果非常炫酷的loading預加載特效,歡迎下載2019-01-31
CSS3實現(xiàn)炫酷loading預加載動畫特效 4種
這是一組超酷的CSS3 loading加載動畫特效,共有4種不同的效果,分別通過不同的CSS3 keyframes幀動畫來完成,歡迎下載2019-01-08純CSS3實現(xiàn)漩渦樣式的Loading加載動畫特效
今天給大家分享的是一款漩渦樣式的CSS3 Loading加載動畫,它在加載的時候就像一個炫酷在旋轉,同時中間有一個loading字樣表示在加載內容。有需要的朋友可以直接下載使用2018-12-03純CSS3實現(xiàn)方塊翻轉效果的Loading加載動畫效果
這是一款基于純CSS3實現(xiàn)的方塊翻轉效果的Loading加載動畫,若干個小方塊組成一個陣列,然后各自按指定方向翻轉,這樣循環(huán)后就形成了Loading加載的動畫效果。有需要的朋友可2018-11-29- css3繪制六邊形縮放加載動畫特效。有需要的朋友可以直接下載使用2018-11-01
- css3繪制彩虹彈簧式加載效果代碼。有需要的朋友可以直接下載使用2018-09-25
- 這是一款基于CSS3+SVG實現(xiàn)S形進度條加載動畫效果源碼。畫面中一個類似蛇形管道的S形狀進度條呈現(xiàn)出從左上方0%進度加載過渡到100%的進度。并如此循環(huán)往復2018-07-09
純CSS3模擬Windows XP開機加載動畫界面loading效果源碼
這是一款基于純CSS3模擬Windows XP開機加載動畫界面loading效果源碼。采用純css3模擬出Windows XP開機啟動時的logo圖標與底部進度條滾動加載的動畫效果2018-07-06純css3實現(xiàn)炫酷谷歌loading圖標加載動畫特效源碼
純css3繪制扁平化的谷歌loading加載圖標動畫特效。圖標有六個大小顏色各異,非常炫酷。有需要的朋友可以直接下載使用2018-07-06