搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-14 04:55:03 来源：互联网
.
雪是一种能够令人产生多种情绪的东西，当窗外那像柳絮、像芦花般的雪花，正在纷纷扬扬地从天而降的时候，当大地被雪花装饰得像铺上白色的地毯一样的时候，站在窗户边上，望着它们。

先看看效果图：

CSS Code复制内容到剪贴板
  1. #loader1,
  2. #loader1:before,
  3. #loader1:after{
  4. background:#f2fa08;
  5. -webkit-animation:load11sinfiniteease-in-out;
  6. animation:load11sinfiniteease-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:50px50px;
  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-keyframesload1{
  34. 0%,
  35. 80%,
  36. 100%{
  37. box-shadow:00#f2fa08;
  38. height:4em;
  39. }
  40. 40%{
  41. box-shadow:0-2em#f2fa08;
  42. height:5em;
  43. }
  44. }
  45. @keyframesload1{
  46. 0%,
  47. 80%,
  48. 100%{
  49. box-shadow:00#f2ff08;
  50. height:4em;
  51. }
  52. 40%{
  53. box-shadow:0-2em#f2ff08;
  54. height:5em;
  55. }
  56. }

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

以下您可能有感兴趣的文章:
标签： 超炫
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图