最近在学习使用CSS动画,看着一些已经实现的loading,自己动手写了一下,在这里做个记录,方便以后在项目中应用,感兴趣的小伙伴也可以拿去用,由于我的电脑无法录制gif,所以暂时先用图片代替效果吧,以后搞好了再更新。
1.图片效果
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width"/>
<title>实现自定义loading效果</title>
<link rel="stylesheet" href="../css/loadingstyle.css" />
</head>
<body>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</body>
</html>
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代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<title>loading效果2</title>
<link rel="stylesheet" href="../css/loadingstyle2.css" />
</head>
<body>
<div class="spinner">
</div>
</body>
</html>
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代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,width = device-width" />
<title>Loading圆形效果</title>
<link rel="stylesheet" href="../css/loadingstyle3.css" />
</head>
<body>
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
</html>
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代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<title>自定义loading小方块变化效果</title>
<link rel="stylesheet" href="../css/loadingstyle4.css" />
</head>
<body>
<div class="spinner">
<div class="squear1"></div>
<div class="squear2"></div>
</div>
</body>
</html>
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.图片效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading效果圆圈</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<link rel="stylesheet" href="../css/loadingstyle5.css" />
</head>
<body>
<div class="spinner">
<div class="smallcircle1"></div>
<div class="smallcircle2"></div>
<div class="smallcircle3"></div>
</div>
</body>
</html>
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代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>loading效果圆圈</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
<link rel="stylesheet" href="../css/loadingstyle6.css" />
</head>
<body>
<div class="spinner1">
<div class="cube cube1"></div>
<div class="cube cube2"></div>
<div class="cube cube3"></div>
<div class="cube cube4"></div>
</div>
<div class="spinner2">
<div class="cube cube5"></div>
<div class="cube cube6"></div>
<div class="cube cube7"></div>
<div class="cube cube8"></div>
</div>
</body>
</html>
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);}
}