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

ttx9n

这篇文章主要介绍了CSS3绘制超炫的上下起伏波动进度加载动画，加载动画用到了CSS3的旋转transform属性，颜色透明度设置和伪元素操作等CSS技术。奇妙的组合，产生了意想不到的效果，感兴趣的小伙伴们可以参考一下

先看看效果图：

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.   

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

Anthonylam

hi哦回复iOS就看见

雪龙Ui79

66666666666666666666

z80vh

论坛有你更精彩！

回复用户1

快更新啊，我擦

adm1n

刷屏刷屏刷屏

回复用户5

我要金豆金豆金豆

a971560

好东西可以可以可以可以

ki9ku6

啦啦啦啦啦啦啦啦！

.l4

看看看看