以前认为，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动漫实际效果，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！