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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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函数解决SQL injection
2006/12/09 PHP
php cli 小技巧
2013/06/03 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Vue中使用vux配置代码详解
2018/09/16 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Pyqt5实现英文学习词典
2019/06/24 Python
django rest framework使用django-filter用法
2020/07/15 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
物流管理专业自荐信
2014/06/23 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
大学生自荐材料范文
2014/12/30 职场文书
邀请书格式范文
2015/02/02 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
早安问候语大全
2015/11/10 职场文书