css3 中实现炫酷的loading效果

前端  /  管理员 发布于 7年前   191

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