•今天实现了一个炫酷的loading效果，基本全用css来实现，主要练习一下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 中实现炫酷的loading效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！