HTML+CSS制作的动画loading效果

本来反向代理加载速度就慢，想做个loading效果打发下加载时间。没想到加了之后更慢。光打开loading就要半天。所以弃用了。放这里给大家参考下。pc端效果正常，移动端会偏移。

效果图：

HTML:

<div class="loading" >
    <div class="header w ">
        <img class="head-sculpture" src="{% static 'dog1.gif' %}" alt="头像">
        <div class="transparent">
            <div class="self-evaluation">若不是因为喜欢，谁愿意当舔狗</div>
        </div>
        <div class="self-evaluation_son">舔狗，舔狗，舔到最后一无所有</div>
    </div>
    <img id="dogrun" src="{% static 'rundog4.gif' %}" alt="">
</div>

JS:

loading = document.querySelector('.header');
header = document.querySelector('.header');
odiv = document.querySelector('.transparent');
sdiv = document.querySelector('.self-evaluation');
dogrun = document.querySelector('#dogrun');
web_bg = document.querySelector('#web_bg');
nav = document.querySelector('.nav');

 var timer = null;
clearInterval(timer); //作用见要点①
timer = setInterval(function () {
    var speed = 4;
    if (odiv.offsetLeft >= 600) { //判断对象边距 到达指定位移则关闭定时器
        clearInterval(timer);
        //loading.style.display = 'none';
        //dogrun.style.display = 'none';
        //web_bg.style.display = 'inline';
        //nav.style.display = 'block';
        //document.body.style.backgroundColor = '#FFFFFF'
    } else {
        odiv.style.left = odiv.offsetLeft + (speed) + 'px'; //将透明盒子向右移动
        sdiv.style.marginRight = odiv.offsetLeft + speed - 4 + 'px';//增加与透明盒子的右边距，保持盒子相对静止。
        dogrun.style.left = odiv.offsetLeft + speed - 60 + 'px';
    }
}, 30);

CSS:

.loading{

    height: 175px;
    width: 600px;
    margin: auto;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.header{

    height: 100px;
    width: 600px;
    float: top;
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:dimgray;
    border-radius:100px 25px 25px 100px;

}
.head-sculpture{
    overflow: hidden;
    position: absolute;
    float: right;
    height: 100px;
    width: 100px;
    z-index:3000;
    border-radius:100px;
    #background-image:url("dog1.gif");
}
.transparent{
    float: right;
    position: absolute;
    height: 100%;
    width: 600px;
    overflow: hidden;

}
.self-evaluation{
    background-color:hotpink;
    height: 100px;
    border-radius:100px 25px 25px 110px;
    font-size: 18px;
    letter-spacing:12px;
    margin: 0 auto;
    padding-top:35px;
    padding-left:136px ;
    padding-right: 35px;
    padding-bottom:35px;
    #padding: 35px 35px 35px 136px;
    position: relative;
    float: right;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index:2000;
}
#dogrun{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index:2500;
    width: 110px;
    height: 75px;
}
.self-evaluation_son{
    font-size: 18px;
    letter-spacing:12px;
    margin: 0 auto;
    padding-top:35px;
    padding-left:136px ;
    padding-right: 35px;
    padding-bottom:35px;
    #padding: 35px 35px 35px 136px;
    #position: absolute;
    float: right;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index:1000;
}

HTML+CSS制作的动画loading效果

相关推荐