CSS3绘制超炫的上下起伏波动进度加载动画

前端  /  管理员 发布于 7年前   311

先看看效果图：

CSS Code复制内容到剪贴板

1. #loader1,     
2. #loader1:before,     
3. #loader1:after {     
4.    background: #f2fa08;     
5.    -webkit-animation: load1 1s infinite ease-in-out;     
6.    animation: load1 1s infinite ease-in-out;     
7.    width: 1em;     
8.    height: 4em;     
9.  }     
10.  #loader1:before,     
11.  #loader1:after {     
12.    position: absolute;     
13.    top: 0;     
14.    content: '';     
15.  }     
16.  #loader1:before {     
17.    left: -1.5em;     
18.  }     
19.  #loader1 {     
20.    text-indent: -9999em;     
21.    margin: 50px 50px;     
22.    position: relative;     
23.    float: left;     
24.    font-size: 11px;     
25.    -webkit-animation-delay: 0.16s;     
26.    animation-delay: 0.16s;     
27.  }     
28.  #loader1:after {     
29.    left: 1.5em;     
30.    -webkit-animation-delay: 0.32s;     
31.    animation-delay: 0.32s;     
32.  }     
33.  @-webkit-keyframes load1 {     
34.    0%,     
35.    80%,     
36.    100% {     
37.      box-shadow: 0 0 #f2fa08;     
38.      height: 4em;     
39.    }     
40.    40% {     
41.      box-shadow: 0 -2em #f2fa08;     
42.      height: 5em;     
43.    }     
44.  }     
45.  @keyframes load1 {     
46.    0%,     
47.    80%,     
48.    100% {     
49.      box-shadow: 0 0 #f2ff08;     
50.      height: 4em;     
51.    }     
52.    40% {     
53.      box-shadow: 0 -2em #f2ff08;     
54.      height: 5em;     
55.    }     
56.  }     
57.   

以上就是本文的全部内容，希望对大家的学习有所帮助。