•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用

•js需要引入jquery 只用到了一点点js

•先看效果图

css3 中实现炫酷的loading效果

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

标签:
用css3实现loading,, css3实现的loading

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“css3 中实现炫酷的loading效果”

暂无“css3 中实现炫酷的loading效果”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?