CSS如何实现横向粒子变动加载动画

这是一篇很有收藏价值的文章《CSS如何实现横向粒子变动加载动画》,在开发过程对大家很有帮助,小编结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

本文实例为大家分享了CSS实现横向粒子变动加载动画的对应代码,供大家参考,具体内容如下

此处用到了CSS3动画animation属性的animation-fill-mode属性和animation-delay属性。

● animation-fill-mode属性规定动画在播放之前或之后,其动画效果是否可见。
none:不改变默认行为。
forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧
中定义)。
both: 向前和向后填充模式都被应用。

● animation-delay属性定义动画何时开始。该属性允许负值,示例中延迟0.16s执行动画。

CSS Code复制内容到剪贴板
  1. #loader7:before,
  2. #loader7:after,
  3. #loader7{
  4. border-radius:50%;
  5. width:2.5em;
  6. height:2.5em;
  7. -webkit-animation-fill-mode:both;
  8. animation-fill-mode:both;
  9. -webkit-animation:load71.8sinfiniteease-in-out;
  10. animation:load71.8sinfiniteease-in-out;
  11. }
  12. #loader7{
  13. margin:60px50px;
  14. float:left;
  15. font-size:10px;
  16. position:relative;
  17. text-indent:-9999em;
  18. -webkit-animation-delay:0.16s;
  19. animation-delay:0.16s;
  20. }
  21. #loader7:before{
  22. left:-3.5em;
  23. }
  24. #loader7:after{
  25. left:3.5em;
  26. -webkit-animation-delay:0.32s;
  27. animation-delay:0.32s;
  28. }
  29. #loader7:before,
  30. #loader7:after{
  31. content:'';
  32. position:absolute;
  33. top:0;
  34. }
  35. @-webkit-keyframesload7{
  36. 0%,
  37. 80%,
  38. 100%{
  39. box-shadow:02.5em0-1.3em#000000;
  40. }
  41. 40%{
  42. box-shadow:02.5em00#000000;
  43. }
  44. }
  45. @keyframesload7{
  46. 0%,
  47. 80%,
  48. 100%{
  49. box-shadow:02.5em0-1.3em#000000;
  50. }
  51. 40%{
  52. box-shadow:02.5em00#000000;
  53. }
  54. }

以上就是本文的全部内容,希望对大家学习CSS样式进行加载有所帮助。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例