&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
CSS3 几步即可实现loading动画效果
摘要：例子1:菊花状的Loading效果第一步画出静态的小菊花。sk-fading-circle{width:40height:40position:}.sk-fading-circle.sk-circle{width:100%;height:100%;position:left:0;top:0;}.sk-fading-circle.sk-circle:before{content:'';display:margin:0a
例子1:菊花状的Loading效果第一步画出静态的小菊花。
sk-fading-circle {
height: 40
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
.sk-fading-circle .sk-circle:before {
content: '';
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
… //为缩减篇幅省略中间10个div
静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型,并通过margin: 0定位到顶格居中位置。由于12个小div都是absolute定位,因此都重叠在了一起。
第二步将12个重叠的圆分散开。
.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅,每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
… //为缩减篇幅省略中间10个div
用transform的rotate将各个圆点旋转,形成完整的菊花状。如果你对transform不熟的话,看下图,第二个圆点旋转30度的示意图,其余圆点的旋转自行脑补:
三步通过animation控制opacity属性,让每个点淡进淡出
@-webkit-keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
@keyframes sk-circleFadeDelay {
0%, 39%, 100% { opacity: 0; }
40% { opacity: 1; }
.sk-fading-circle .sk-circle:before {
animation: sk-circleFadeDelay 1.2s infinite ease-in-
这样每个点都在像信号灯一样同步地闪烁。
最后一步,给每个点设置animation-delay延时,以错开闪烁的时间,形成常见的菊花转转的效果 .sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }
因为是12个圆点,每个圆点的闪烁间隔时间0.1s,因此第1个圆点没有animation-delay延时,立即闪烁。第二个圆点,从-1.1s开始闪烁(负数不理解的话,参考animation一文,意思是从该时间点开始启动,之前的动画效果不显示)。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果
例子2:ios版菊花Loading
明白了原理后,无非是在例子1的基础上,将圆点改成竖条,opacity半透明即可。
例子3:琴谱版Loading第一步,画出静态琴谱,很简单无非是一个外层div,内嵌几个并排的div而已。
.spinner {
height: 40
.spinner & div {
background-color: #333;
height: 100%;
display: inline-
… //你可以根据需求多加几个div
第二步,琴谱动起来
.spinner & div {
animation: sk-stretchdelay 1.2s infinite ease-in-
@keyframes sk-stretchdelay {
0%, 40%, 100% { transform: scaleY(0.4); }
20% { transform: scaleY(1.0); }
} 例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸
最后一步,设置延时,让每个琴键在不同时间内拉伸。
.spinner .rect2 {animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }
… //为节省篇幅省略中间代码
每个琴键的拉伸间隔时间0.1s,因此第1个琴键没有animation-delay延时,立即拉伸。第二个琴键,从-1.1s开始闪烁。之后每个琴键均以0.1s递增的速度拉伸。和菊花Loading的原理是一样的,不赘述。
更多的Loading例子,网上有很多优秀的例子,例如cssload。但Loading的动画效果最多只能算一盘餐前小点,你可以充分挖掘CSS3的动画属性的潜力,制作出更炫的效果。
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
CSS3 几步即可实现loading动画效果相关信息，包括
的信息，所有CSS3 几步即可实现loading动画效果相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
InternationalCSS3 animation 属性
CSS3 animation 属性
使用简写属性，将动画与 div 元素绑定：
animation:mymove 5
-webkit-animation:mymove 5
浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。
定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
none 0 ease 0 1 normal
JavaScript 语法：
object.style.animation=&mymove 5s infinite&
animation: name duration timing-function delay iteration-count direction;
规定需要绑定到选择器的 keyframe 名称。。
规定完成动画所花费的时间，以秒或毫秒计。
规定动画的速度曲线。
规定在动画开始之前的延迟。
规定动画应该播放的次数。
规定是否应该轮流反向播放动画。
CSS3 教程：Access denied | webdesign.tutsplus.com used Cloudflare to restrict access
Please enable cookies.
What happened?
The owner of this website (webdesign.tutsplus.com) has banned your access based on your browser's signature (44dafed1c8ed7766-ua98).请问类似于这种动画效果应该如何使用js或者css3实现？求大神给个思路？
[问题点数：40分，结帖人CodingNoob]
本版专家分：651
结帖率 85%
CSDN今日推荐
本版专家分：19091
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：1647
本版专家分：19091
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：651
本版专家分：651
匿名用户不能发表回复！
其他相关推荐赞助商推荐()：}