CSS3 线性渐变循环动画
最近开发,遇到一个首屏加载优化的情况,需要如下图的线性渐变动画:
网页动态效果
代码如下:
1.
// css file
2.
.loading-list-wrap {
3.
padding:
24px
0
0
24px;
4. }
5.
6.
.loading-list-wrap
.loading-item {
7.
display: flex;
8.
flex-direction: row;
9.
margin-bottom:
40px;
10. }
11.
12.
.loading-list-wrap
.file-temp {
13.
width:
82px;
14.
height:
82px;
15.
margin-right:
20px;
16. }
17.
18.
.loading-list-wrap
.name-temp {
19.
margin-top:
8px;
20.
width:
178px;
21.
height:
28px;
22. }
23.
24.
.loading-list-wrap
.des-temp {
25.
margin-top:
18px;
26.
width:
308px;
27.
height:
20px;
28. }
29.
30.
.loading-list-wrap
.file-temp,
31.
.name-temp,
32.
.des-temp {
33.
animation-name: loading;
34.
animation-duration:
1.8s;
35.
animation-timing-function: ease-in;
36.
animation-iteration-count: infinite;
37.
background: linear-gradient(
90deg,
#EDEEF1
0%,
#F6F7F9
50%,
#EDEEF1
100%);
38.
background-size:
200%
100%;
39.
background-position:
200%
0;
40. }
41.
42. @keyframes loading {
43.
0% {
44.
background-position:
200%
0;
45. }
46.
100% {
47.
background-position:
0
0;
48. }
49. }
1.html
file
2.
3.<
div
class='loading-
list-wrap'>
4. <
div
class='loading-
item'>
5. <
div
class='
file-temp'></
div>
6. <
div
class='
file-pro-wrap'>
7. <
div style='width:
178px;'
class='
name-temp'></
div>
8. <
div style='width:
308px;'
class='des-temp'></
div>
9. </
div>
10. </
div>
11.
12. <
div
class='loading-
item'>
13. <
div
class='
file-temp'></
div>
14. <
div
class='
file-pro-wrap'>
15. <
div style='width:
148px;'
class='
name-temp'></
div>
16. <
div style='width:
244px;'
class='des-temp'></
div>
17. </
div>
18. </
div>
19.
20. <
div
class='loading-
item'>
21. <
div
class='
file-temp'></
div>
22. <
div
class='
file-pro-wrap'>
23. <
div style='width:
98px;'
class='
name-temp'></
div>
24. <
div style='width:
420px;'
class='des-temp'></
div>
25. </
div>
26. </
div>
27.
28. <
div
class='loading-
item'>
29. <
div
class='
file-temp'></
div>
30. <
div
class='
file-pro-wrap'>
31. <
div style='width:
228px;'
class='
name-temp'></
div>
32. <
div style='width:
478px;'
class='des-temp'></
div>
33. </
div>
34. </
div>
35.
36. <
div
class='loading-
item'>
37. <
div
class='
file-temp'></
div>
38. <
div
class='
file-pro-wrap'>
39. <
div style='width:
294px;'
class='
name-temp'></
div>
40. <
div style='width:
178px;'
class='des-temp'></
div>
41. </
div>
42. </
div>
43. </
div>