最近在学习使用CSS动画,看着一些已经实现的loading,自己动手写了一下,在这里做个记录,方便以后在项目中应用,感兴趣的小伙伴也可以拿去用,由于我的电脑无法录制gif,所以暂时先用图片代替效果吧,以后搞好了再更新。
1.图片效果
html代码
实现自定义loading效果
css代码:
*{
padding:0;
margin:0;
}
html,body{
height:100%;
}
.spinner{
position:absolute;
width:60px;
height:50px;
text-align: center;
top:50%;
left:50%;
font-size:12pt;
transform: translate(-50%,-50%); /*使用这句用于元素的居中显示*/
}
.spinner > div {
height:100%;
width:6px;
background: #67CF22;
float: left;
margin-left: 4px;
animation: strechedelay 2s infinite ease-in;
-webkit-animation: strechedelay 2s infinite ease-in;
-moz-animation: strechedelay 2s infinite ease-in;
}
@keyframes strechedelay{
0%,40%,100%{
transform:scaleY(0.4)
}
20%{
transform:scaleY(1.0)
}
}
@-webkit-keyframes strechedelay{
0%,40%,100%{
transform:scaleY(0.4)
}
20%{
transform:scaleY(1.0)
}
}
@-moz-keyframes strechedelay{
0%,40%,100%{
transform:scaleY(0.4)
}
20%{
transform:scaleY(1.0)
}
}
.spinner .rect1{
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.spinner .rect2{
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.spinner .rect3{
animation-delay: 1.0s;
-webkit-animation-delay: 1.0s;
}
.spinner .rect4{
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
.spinner .rect5{
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
2.图片效果
html代码
loading效果2
css代码:
*{
padding: 0;
margin:0;
}
html,body{height:100%;}
.spinner{
width:50px;
height:50px;
background: #67CF22;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane{
0%{-webkit-transform: rotateX(0deg) rotateY(0) ;}
50%{-webkit-transform: rotateY(180deg) ;}
100%{-webkit-transform:rotateX(180deg) rotateY(180deg)}
}
@keyframes rotateplane{
0%{transform: rotateX(0deg) rotateY(0) ;}
50%{transform: rotateY(180deg) ;}
100%{transform:rotateX(180deg) rotateY(180deg) }
}
3.图片效果
html代码
Loading圆形效果
css代码
*{
padding:0;
margin:0;
}
html,body{
height:100%;
}
.spinner{
width:60px;
height:60px;
text-align: center;
align-content: center;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.spinner .double-bounce1,.spinner .double-bounce2{
width:100%;
height:100%;
background: #67CF22;
border-radius: 50% 50%;
opacity: 0.5;
position:absolute;
}
.double-bounce1{
-webkit-animation: scalecircle 1.2s infinite ease-in-out;
animation: scalecircle 1.2s infinite ease-in-out;
}
.double-bounce2{
-webkit-animation: scalecircle2 1.2s infinite ease-in-out;
animation: scalecircle2 1.2s infinite ease-in-out;
}
@keyframes scalecircle{
0%{transform: scale(1.0);}
100%{transform: scale(0.0);}
}
@-webkit-keyframes scalecircle{
0%{-webkit-transform: scale(1.0);}
100%{-webkit-transform: scale(0.0);}
}
@keyframes scalecircle2{
0%{transform: scale(0.0);}
100%{transform: scale(1.0);}
}
@-webkit-keyframes scalecircle2{
0%{-webkit-transform: scale(0.0);}
100%{-webkit-transform: scale(1.0);}
}
4.图片效果
html代码
自定义loading小方块变化效果
css代码
*{margin:0;padding:0}
html,body{height:100%;}
.spinner{
width:32px;
height:32px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.squear1,.squear2{
width:30px;
height:30px;
top:0;
left:0;
background: #67CF22;
position:absolute;
}
.squear1{
-webkit-animation: cubechange 2s infinite ease-in-out;
animation: cubechange 2s infinite ease-in-out;
}
.squear2{
-webkit-animation: cubechange 2s infinite ease-in-out 1s;
animation: cubechange 2s infinite ease-in-out 1s;
}
@-webkit-keyframes cubechange{
25%{
transform: scale(0.5) rotate(90deg) translateX(40px);
}
50%{
transform: rotate(179deg) translateX(40px) translateY(40px);
}
50.1%{
transform: rotate(180deg) translateX(40px) translateY(40px);
}
75%{
transform: scale(0.5) rotate(270deg) translateY(40px) translateX(0px);
}
100%{
transform: rotate(360deg);
}
}
@keyframes cubechange{
25%{
transform: scale(0.5) rotate(90deg) translateX(40px);
}
50%{
transform: rotate(179deg) translateX(40px) translateY(40px);
}
50.1%{
transform: rotate(180deg) translateX(40px) translateY(40px);
}
75%{
transform: scale(0.5) rotate(270deg) translateY(40px) translateX(0px);
}
100%{
transform: rotate(360deg) ;
}
}
5.图片效果
loading效果圆圈
css代码:
*{margin:0;padding:0;}
html,body{height:100%;}
.spinner{
width:auto;
height:30px;
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%) ;
}
.smallcircle1,.smallcircle2,.smallcircle3{
width:30px;
height:30px;
background: #007AFF;
border-radius: 50% 50%;
float:left;
margin-left: 5px;
-webkit-animation: bouncechange 1.2s infinite ease-in-out;
animation: bouncechange 1.2s infinite ease-in-out;
}
.smallcircle2{
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.smallcircle3{
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
@-webkit-keyframes bouncechange{
0%{
transform: scale(0);
}
50%{
transform: scale(1.0);
}
100%{
transform: scale(0);
}
}
@keyframes bouncechange{
0%{
transform: scale(0);
}
50%{
transform: scale(1.0);
}
100%{
transform: scale(0);
}
}
6.图片效果
html代码:
loading效果圆圈
css代码
*{
margin:0;
padding:0;
}
html,body{height:100%;}
.spinner1,.spinner2{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.spinner1{
display: block;
}
.spinner2{
display: block;
}
.cube{
width:20px;
height:20px;
background: #67CF22;
border-radius: 50% 50%;
position:absolute;
-webkit-animation: cubechange infinite 0.8s ease-in-out;
animation: cubechange infinite 0.8s ease-in-out;
}
.cube1{
top:12px;
left:12px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.cube2{
top:12px;
left:68px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.cube3{
top:68px;
left:12px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.cube4{
top:68px;
left:68px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.cube5{
top:0px;
left:40px;
}
.cube6{
top:40px;
left:0px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.cube7{
top:80px;
left:40px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.cube8{
top:40px;
left:80px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes cubechange{
0%,100%{transform: scale(0.0);}
25%,75%{transform: scale(0.5);}
50%{transform: scale(1.0);}
}
@keyframes cubechange{
0%,100%{transform: scale(0.0);}
25%,75%{transform: scale(0.5);}
50%{transform: scale(1.0);}
}