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. }

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

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>

CSS3 线性渐变循环动画相关推荐

html渐变线条代码,css3线性渐变语法的详解（代码示例）
本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...
html给文字添加波浪线,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
CSS3: 线性渐变用法详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv {width:400px;height:400px;border:1p ...
波浪形状html,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
CSS3 线性渐变（linear-gradient）
在CSS3出现之前,渐变效果只能通过图形软件(比如Photoshop)设计图片来实现,可拓展性差,还影响性能,而且还必须要会PS.如今通过CSS3可以很轻松的完成渐变效果. 一.线性渐变的基础知识介绍 ...
CSS3实现渐变背景动画特效
效果图: 具体实现代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变如需创建线性渐 ...
使用CSS3线性渐变实现图片闪光划过效果
在百度音乐 http-:--//m-usic.baidu.c-om/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下: 原文地址: 转载于: ...
CSS3 线性渐变背景的过渡效果
对于background-color,可以直接transition: background-color 2s就能实现过渡效果,但对于background:-webkit-radial-gradient ...

CSS3 线性渐变循环动画

CSS3 线性渐变循环动画

CSS3 线性渐变循环动画相关推荐

最新文章

热门文章