首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:08
字体:
来源:转载
供稿:网友

本文实例为大家分享了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,      #loader7:after,     
  2. #loader7 {        border-radius: 50%;     
  3.   width: 2.5em;        height: 2.5em;     
  4.   -webkit-animation-fill-mode: both;        animation-fill-mode: both;     
  5.   -webkit-animation: load7 1.8s infinite ease-in-out;        animation: load7 1.8s infinite ease-in-out;     
  6. }      #loader7 {     
  7.   margin: 60px 50px;        float: left;     
  8.   font-size: 10px;        position: relative;     
  9.   text-indent: -9999em;        -webkit-animation-delay: 0.16s;     
  10.   animation-delay: 0.16s;      }     
  11. #loader7:before {        left: -3.5em;     
  12. }      #loader7:after {     
  13.   left: 3.5em;        -webkit-animation-delay: 0.32s;     
  14.   animation-delay: 0.32s;      }     
  15. #loader7:before,      #loader7:after {     
  16.   content: '';        position: absolute;     
  17.   top: 0;      }     
  18. @-webkit-keyframes load7 {        0%,     
  19.   80%,        100% {     
  20.     box-shadow: 0 2.5em 0 -1.3em #000000;        }     
  21.   40% {          box-shadow: 0 2.5em 0 0 #000000;     
  22.   }      }     
  23. @keyframes load7 {        0%,     
  24.   80%,        100% {     
  25.     box-shadow: 0 2.5em 0 -1.3em #000000;        }     
  26.   40% {          box-shadow: 0 2.5em 0 0 #000000;     
  27.   }      }   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表