css3 loading加载动画圆形/圆周滚动效果【演示/源码下载】
作者:admin 时间:2022-3-16 16:29:50 浏览:726本文介绍一个纯CSS3实现的loading加载动画,是一个圆形滚动的效果。
HTML
- <div class="div1">
- <span class="span1"></span>
- <span class="span2"></span>
- <span class="span3"></span>
- <span class="span4"></span>
- </div>
- <div class="div2">
- <span class="span1"></span>
- <span class="span2"></span>
- <span class="span3"></span>
- <span class="span4"></span>
- </div>
HTML结构有两个DIV
标签,它们的class值分别为div1
和div2
。
每个DIV
里面有4个span
标签,它们的class值依次为span1
、span2
、span3
、span4
。
CSS
div
定义圆的大小,该实例圆的高(height)、宽(width)均为50px。
div span {}
定义滚动小圆的大小、颜色等样式。
transform: rotate(45deg);
是定义动画转动45度。
transform: scale(n);
是定义动画缩小或放大n倍。
animation: dh 1s linear infinite;
是定义动画执行时间为1s,linear
是表示匀速进行,infinite
是表示循环执行。
animation-delay
表示动画延迟执行时间。实例里有8个span
,表示有8个小圆,使用animation-delay
属性,让不同圆在不同时间运行动画,从而从整体视觉上看似整个大圆在做圆周滚动。
总结
本文介绍了一个css3实现的loading加载动画圆形滚动效果,实例主要使用了animation
等动画属性来实现。animation
是css3实现动画的主要属性,你可以用它来轻松实现各种实用的动画,参看此文《详解 CSS3 animation 6个动画属性》了解更多。