一. 效果一
(一). 效果图如下
(二). 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; }
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。