animation属性 + @keyframes 实现简易的【加载中】样式
load_test.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="load_style.css">
</head>
<body>
<!-- 1 ~ 3 -->
<div>
<input id='process_state_1' class='transform'></input>
<input id='process_state_2' class='transform'></input>
<input id='process_state_3' class='transform'></input>
</div>
<div class='block'> </div>
<!-- 4. -->
<div>
<input id='process_0' class='transform'></input>
<input id='process_1' class='transform'></input>
<input id='process_2' class='transform'></input>
<input id='process_3' class='transform'></input>
<input id='process_4' class='transform'></input>
<input id='process_5' class='transform'></input>
<input id='process_6' class='transform'></input>
<input id='process_7' class='transform'></input>
<input id='process_8' class='transform'></input>
<input id='process_9' class='transform'></input>
</div>
</body>
</html>
load_style.css
/**
loading 样式制作
*/
* {
padding: 0px;
margin: 0px;
}
body {
margin-top: 100px;
background: rgba(221, 221, 221, 1);
text-align: center;
}
.block {
height: 50px;
}
/** 模板网址: http://www.runoob.com/try/try.php?filename=trycss3_animation3 */
/** 1. 根据例子的尝试 */
/*
.transform {
position: relative;
text-align: center;
width: 100px;
height: 100px;
background: red;
font-size: 20px;
font-weight: bolder;
color: white;
border-radius: 20px;
border-width: 0px;
animation: inprocess 2s;
animation-iteration-count: infinite;
}
@keyframes inprocess {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
}
*/
/** 2. 稍加改变 */
/*
.transform {
position: relative;
text-align: center;
width: 100px;
height: 100px;
background: red;
font-size: 20px;
font-weight: bolder;
color: white;
border-radius: 20px;
border-width: 0px;
animation: inprocess 2s;
animation-iteration-count: infinite;
}
@keyframes inprocess_test {
0% {background: red; left: 0px; top: 0px;}
50% {background: blue; left: 200px; top: 0px;}
100% {background: red; left: 0px; top: 0px;}
}
*/
/** 3. 力学传递 */
.transform {
position: relative;
text-align: center;
width: 40px;
height: 40px;
background: white;
font-size: 14px;
font-weight: bolder;
color: #83ccae;
border-radius: 20px;
border-width: 0px;
}
#process_state_1 {
animation: inprocess_left 3s;
animation-iteration-count: infinite;
}
#process_state_2 {
animation: inprocess_middle 3s;
animation-iteration-count: infinite;
}
#process_state_3 {
animation: inprocess_right 3s;
animation-iteration-count: infinite;
}
@keyframes inprocess_left {
0% {background: #83ccae; left: -200px;}
25% {background: white; left: 0px;}
50% {background: white; left: 0px;}
75% {background: white; left: 0px;}
100% {background: #83ccae; left: -200px;}
}
@keyframes inprocess_middle {
0% {background: white; left: 0px;}
25% {background: #83ccae; left: 0px;}
50% {background: white; left: 0px;}
75% {background: #83ccae; left: 0px;}
100% {background: white; left: 0px;}
}
@keyframes inprocess_right {
0% {background: white; left: 0px;}
25% {background: white; left: 0px;}
50% {background: #83ccae; left: 200px;}
75% {background: white; left: 0px;}
100% {background: white; left: 0px;}
}
#process_0 {
animation: inprocess_0 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_0 {
0% {background: #83ccae;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_1 {
animation: inprocess_1 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_1 {
0% {background: white;}
5% {background: white;}
10% {background: #83ccae;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_2 {
animation: inprocess_2 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_2 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: #83ccae;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_3 {
animation: inprocess_3 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_3 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: #83ccae;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_4 {
animation: inprocess_4 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_4 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: #83ccae;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_5 {
animation: inprocess_5 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_5 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: #83ccae;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_6 {
animation: inprocess_6 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_6 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: #83ccae;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_7 {
animation: inprocess_7 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_7 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: #83ccae;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: white;}
}
#process_8 {
animation: inprocess_8 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_8 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: #83ccae;}
95% {background: white;}
100% {background: white;}
}
#process_9 {
animation: inprocess_9 0.8s;
animation-iteration-count: infinite;
}
@keyframes inprocess_9 {
0% {background: white;}
5% {background: white;}
10% {background: white;}
15% {background: white;}
20% {background: white;}
25% {background: white;}
30% {background: white;}
35% {background: white;}
40% {background: white;}
45% {background: white;}
50% {background: white;}
55% {background: white;}
60% {background: white;}
65% {background: white;}
70% {background: white;}
75% {background: white;}
80% {background: white;}
85% {background: white;}
90% {background: white;}
95% {background: white;}
100% {background: #83ccae;}
}
各自保存文件,Just Run!