CSS3 线性渐变循环动画

CSS3 线性渐变循环动画

最近开发，遇到一个首屏加载优化的情况，需要如下图的线性渐变动画：

网页动态效果

（http://htmlpreview.github.io/?https://github.com/tangxiaolang101/imageView/blob/master/gradientAnimation.html）

代码如下：

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>