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 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 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
php访问查询mysql数据的三种方法
2006/10/09 PHP
php 验证码实例代码
2010/06/01 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
php strftime函数的详细用法
2018/06/21 PHP
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
js实现聊天对话框
2020/02/08 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
浅述python中深浅拷贝原理
2018/09/18 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
教师简历自我评价
2014/02/03 职场文书
挂靠协议书范本
2014/04/22 职场文书
博士生求职信
2014/07/06 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书