当前位置:Web前端 > > 正文

css3中过渡动画的属性(css3 中实现炫酷的loading效果)

时间:2022-03-31 19:05:37类别:Web前端

css3中过渡动画的属性

css3 中实现炫酷的loading效果

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

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

•先看效果图

css3中过渡动画的属性(css3 中实现炫酷的loading效果)

html:

  • <li class="box">
            <li class="master">
                <li class="eyes">
                    <li class="eyes-ball"></li>
                </li>
                <li class="mouth"></li>
            </li>
            <li class="master blue">
                <li class="eyes">
                    <li class="eyes-ball"></li>
                </li>
                <li class="mouth"></li>
            </li>
        </li>
        <li class="model">
            <li class="master">
                <li class="eyes">
                    <li class="eyes-ball"></li>
                </li>
                <li class="mouth"></li>
            </li>
            <li class="loading">
                <li class="loading-bar"></li>
            </li>
            <li class="jz-loading">加载中 . . .</li>
        </li>
    
  • 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效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐