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

雪是一种能够令人产生多种情绪的东西,当窗外那像柳絮、像芦花般的雪花,正在纷纷扬扬地从天而降的时候,当大地被雪花装饰得像铺上白色的地毯一样的时候,站在窗户边上,望着它们。

先看看效果图:

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

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

您可能有感兴趣的文章
用CSS的text-shadow制作超炫文字效果全攻略

一款如何利用纯css3如何实现的超炫3D表单的实例好代码教程

css实例好代码教程 一款纯css3如何实现的超炫动画背画特效

css3如何实现超炫风车特效

CSS3实例分享--超炫checkbox复选框和radio单选框