CSS3制作ajax loader icon实现思路及代码


Posted in HTML / CSS onAugust 25, 2013

本文用到的两个CSS3属性:transform、animation
一、HTML

复制代码
代码如下:

<div class="ajax-loading">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
</div>

二、CSS

复制代码
代码如下:

.ajax-loading {
position: relative;
width: 100px;
height: 100px;
margin: 25px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: rotateThis 1s infinite step-start;
animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
position: absolute;
top: 35px;
left: 45px;
width: 10px;
height: 30px;
background: #000;
}
.ajax-loading div.bar1 {
-webkit-transform: rotate(0deg) translate(0, -40px);
transform: rotate(0deg) translate(0, -40px);
opacity: 0.12;
}
.ajax-loading div.bar2 {
-webkit-transform: rotate(45deg) translate(0, -40px);
transform: rotate(45deg) translate(0, -40px);
opacity: 0.25;
}
.ajax-loading div.bar3 {
-webkit-transform: rotate(90deg) translate(0, -40px);
transform: rotate(90deg) translate(0, -40px);
opacity: 0.37;
}
.ajax-loading div.bar4 {
-webkit-transform: rotate(135deg) translate(0, -40px);
transform: rotate(135deg) translate(0, -40px);
opacity: 0.5;
}
.ajax-loading div.bar5 {
-webkit-transform: rotate(180deg) translate(0, -40px);
transform: rotate(180deg) translate(0, -40px);
opacity: 0.62;
}
.ajax-loading div.bar6 {
-webkit-transform: rotate(225deg) translate(0, -40px);
transform: rotate(225deg) translate(0, -40px);
opacity: 0.75;
}
.ajax-loading div.bar7 {
-webkit-transform: rotate(270deg) translate(0, -40px);
transform: rotate(270deg) translate(0, -40px);
opacity: 0.87;
}
.ajax-loading div.bar8 {
-webkit-transform: rotate(315deg) translate(0, -40px);
transform: rotate(315deg) translate(0, -40px);
opacity: 1;
}
@-webkit-keyframes rotateThis {
0% {-webkit-transform:scale(0.5) rotate(0deg);}
12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
25% {-webkit-transform:scale(0.5) rotate(90deg);}
37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
50% {-webkit-transform:scale(0.5) rotate(180deg);}
62.5% {-webkit-transform:scale(0.5) rotate(225deg);}
75% {-webkit-transform:scale(0.5) rotate(270deg);}
87.5% {-webkit-transform:scale(0.5) rotate(315deg);}
100% {-webkit-transform:scale(0.5) rotate(360deg);}
}
@keyframes rotateThis {
0% {transform:scale(0.5) rotate(0deg);}
12.5% {transform:scale(0.5) rotate(45deg);}
25% {transform:scale(0.5) rotate(90deg);}
37.5% {transform:scale(0.5) rotate(135deg);}
50% {transform:scale(0.5) rotate(180deg);}
62.5% {transform:scale(0.5) rotate(225deg);}
75% {transform:scale(0.5) rotate(270deg);}
87.5% {transform:scale(0.5) rotate(315deg);}
100% {transform:scale(0.5) rotate(360deg);}
}

三、思路
1. transform控制每个小方块在Y轴的偏移,rotate控制旋转的角度,scale缩放至原大小的一半;
2. opacity在每个小方块之间相差0.12左右,达到渐变效果;
3. 设置top与left偏移,控制圆心在中心处;
4. 为整个方块设置旋转动画rotateThis,定义8个时间点;
5. 设置动画的animation-timing-function为step-start,达到的效果是不让动画渐变;
HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
css3学习心得分享
Aug 19 #HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 #HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 #HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 #HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 #HTML / CSS
CSS3正方体旋转示例代码
Aug 08 #HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 #HTML / CSS
You might like
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JavaScript入门基础
2015/08/12 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
python去除所有html标签的方法
2015/05/05 Python
python斐波那契数列的计算方法
2018/09/27 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
在django模板中实现超链接配置
2019/08/21 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
鼓舞士气的口号
2014/06/16 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
2014年会计工作总结
2014/11/27 职场文书
安全保证书
2015/01/16 职场文书
避暑山庄导游词
2015/02/04 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
债务追讨律师函
2015/06/24 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python