您现在的位置是：网站首页> 编程资料编程资料

CSS实现横向粒子变动加载动画CSS控制前端图片HTTP请求的各种情况示例css全屏背景图片设置,django加载图片路径详解纯CSS3实现的绿色Loading加载动画特效源码jQuery+css3实现的点击下载按钮3D加载downlading进度特效源码CSS实现弹簧效果的旋转加载动画CSS实现大小相同、颜色深浅不一的粒子旋转加载动画CSS实现圆环旋转加载动画CSS3实现粒子旋转伸缩加载动画深入解析动态加载css的实现方法

2021-09-05 945人已围观

简介这篇文章主要介绍了CSS实现横向粒子变动加载动画的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

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

CSS Code复制内容到剪贴板

#loader7:before,
#loader7:after,
#loader7 {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
#loader7 {
margin: 60px 50px;
float: left;
font-size: 10px;
position: relative;
text-indent: -9999em;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#loader7:before {
left: -3.5em;
}
#loader7:after {
left: 3.5em;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
#loader7:before,
#loader7:after {
content: '';
position: absolute;
top: 0;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em #000000;
}
40% {
box-shadow: 0 2.5em 0 0 #000000;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em #000000;
}
40% {
box-shadow: 0 2.5em 0 0 #000000;
}
}

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

上一篇：自适应屏幕的CSS响应式布局设计技巧总结

下一篇：CSS实现圆环旋转加载动画css制作收缩圆环旋转效果实例代码css3 clip实现圆环进度条的示例代码图解CSS3制作圆环形进度条的实例教程实现CSS圆环的5种方法(小结)

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢