最近在写前端页面的时候需要用到
loading的动画效果，所以在此记录下来。本人偏爱效果一。
一. 效果一
(一). 效果图如下
(二). html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test1.css">
</head>
<body>
<div class="loading">
<h2>正在加载中......</h2>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
(三). 样式
test1.css样式内容如下：
body {
background: #222;
text-align: center;
padding: 20%;
}
h2 {
color: #ccc;
margin: 0;
font: .8em verdana;
text-transform: uppercase;
letter-spacing: .1em;
}
.loading span {
display: inline-block;
vertical-align: middle;
width: .6em;
height: .6em;
margin: .19em;
background: #007DB6;
border-radius: .6em;
animation: loading 1s infinite alternate;
}
.loading span:nth-of-type(2) {
background: #008FB2;
animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #009B9E;
animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #00A77D;
animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #00B247;
animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
background: #5AB027;
animation-delay: 1.0s;
}
.loading span:nth-of-type(7) {
background: #A0B61E;
animation-delay: 1.2s;
}
@keyframes loading {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
二. 效果2
(一). 效果图
(二). html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test2.css">
</head>
<body>
<figure>
<div class="dot white"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</figure>
</body>
</html>
(三). 样式
test2.css样式内容如下：
body { background: #222; }
figure {
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 0; right: 0;
width: 6.250em; height: 6.250em;
animation: rotate 2.4s linear infinite;
}
.white {
top: 0; bottom: 0; left: 0; right: 0;
background: white;
animation: flash 2.4s linear infinite;
opacity: 0;
}
.dot {
position: absolute;
margin: auto;
width: 2.4em; height: 2.4em;
border-radius: 100%;
transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }
@keyframes rotate {
0% { transform: rotate( 0 ); }
10% { width: 6.250em; height: 6.250em; }
66% { width: 2.4em; height: 2.4em; }
100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}
@keyframes dotsY {
66% { opacity: .1; width: 2.4em; }
77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
66% { opacity: .1; height: 2.4em;}
77%{ opacity: 1; height: 0; }
}
@keyframes flash {
33% { opacity: 0; border-radius: 0%; }
55%{ opacity: .6; border-radius: 100%; }
66%{ opacity: 0; }
}