CSS完成1个简易loading动漫实际效果

2021-01-20 04:21 jianzhan

以前认为,loading的制做必须1些较为深奥的web动漫技术性,后来发现大多数数loading都可以以用“障眼法”做出来。例如1个转动的圆圈,其实不全是将gif图放进去,一些便是画个静止不动图象,随后让它转动就完了。gif图还可以,可是载入時间较为长。

  CSS的animation能够做出大多数数的loading,例如:

loading1:

1、HTML:

<div id="ddr">
    <div class="ddr ddr1"></div>
    <div class="ddr ddr2"></div>
    <div class="ddr ddr3"></div>
    <div class="ddr ddr4"></div>
    <div class="ddr ddr5"></div>
</div>

2、CSS:

#ddr{
    margin: 0 auto;
    width: 70px;
    height: 120px;
}
.ddr{
    width: 10px;
    height: 120px;
    float: left;
    margin: 2px;
    background-color: #00ff00;
    animation: loading 1s infinite ease-in-out;/*animation:动漫名字 不断時间 动漫速率曲线图 延迟时间 实行是多少次 是不是正反向轮着播发*/
}
.ddr2{
    animation-delay: -0.9s;/*界定刚开始实行的地区,负号表明立即从第900ms刚开始实行*/
}
.ddr3{
    animation-delay: -0.8s;
}
.ddr4{
    animation-delay: -0.7s;
}
.ddr5{
    animation-delay: -0.6s;
}
@keyframes loading {
    0%,40%,100%{ /*界定每帧的姿势*/
        -webkit-transform: scaleY(0.5);
    }
    20%{
        -webkit-transform: scaleY(1);
    }
}

loading2:

1、HTML:

 <div id="circle"></div>

2、CSS:

#circle{
    margin: 20px auto;
    width: 100px;
    height: 100px;
    border: 5px white solid;
    border-left-color: #ff5500;
    border-right-color:#0c80fe;
    border-radius: 100%;
    animation: loading1 1s infinite linear;
}
@keyframes loading1{
    from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}

loading3:

1、HTML:

 <div id="loader">
     <div id="loader-inner"></div>
 </div>

2、CSS:

#loader3{
    box-sizing: border-box;
    position: relative;
    margin-left: 48%;
    transform: rotate(180deg);
    width: 50px;
    height: 50px;
    border: 10px groove rgb(170, 18, 201);
    border-radius: 50%;
    animation: loader⑶ 1s ease-out alternate infinite;/* alternate表明则动漫会在单数次数(1、3、5 这些)一切正常播发,而在偶多次数(2、4、6 这些)反方向播发 */
}
#loader3-inner{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 0 inset rgb(170, 18, 201);
    border-radius: 50%;
    animation: border-zoom 1s ease-out alternate infinite;
}
@keyframes loader⑶ {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(⑶60deg);
    }
}
@keyframes border-zoom {
    0%{
        border-width: 0px;
    }
    100%{
        border-width: 10px;
    }
}

loading4:

1、HTML:

 <div id="loading">
     <div id="loader" class="heart"></div>
 </div>

2、CSS:

#loading4{
    width: 100%;
    height: 100px;
}
#loader4{
    position: relative;
    margin-left: calc(50% - 25px);
    width: 50px;
    height: 50px;
    animation: loader⑷ 1s ease-in-out alternate infinite;
}
.heart:before{
    position: absolute;
    left: 11px;
    content: "";
    width: 50px;
    height: 80px;
    transform: rotate(45deg);
    background-color: rgb(230, 6, 6);
    border-radius: 50px 50px 0 0;
}
.heart:after{
    position: absolute;
    right: 11px;
    content: "";
    width: 50px;
    height: 80px;
    background-color: rgb(230, 6, 6);
    transform: rotate(⑷5deg);
    border-radius: 50px 50px 0 0;
}
@keyframes loader⑷ {
    0%{
        transform: scale(0.2);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

逢年过节,百度搜索或谷歌都会在主页播发1段动漫,例如元宵节:

这个动漫并不是gif图,而是1张长长的包括全部帧的照片:

模仿animation1帧1桢的思路,能够将这张照片做成动漫:

#picHolder{
  /* 照片款式 */
      position: absolute;
      top: %;
      left: %;
      width: px;
      height: px;
      margin-left:-px;
      background-image: url("../../../Library_image/tangyuan.png");
     background-repeat: no-repeat;
     background-position-x: ;
     cursor: pointer; 
 }

  function animation () {
  /* 定时执行挪动照片,使观众看到不一样的帧 */
    var po = 
    var i = 
    var holder = document.getElementById('picHolder')
    setInterval(function () {
      po += -
      i++
      holder.style.backgroundPositionX = po + 'px'
     if (i >= ) {
       i = 
       po = 
     }
   }, )
 }
 window.onload = function () {
   animation()
 }

总结

以上所述是网编给大伙儿详细介绍的CSS完成1个简易loading动漫实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!