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 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 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
图象函数中的中文显示
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php事务处理实例详解
2014/07/11 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python之pandas用法大全
2018/03/13 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
服装创业计划书范文
2014/02/05 职场文书
模范教师事迹材料
2014/02/10 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
长城导游词
2015/01/30 职场文书
岳麓书院导游词
2015/02/03 职场文书
离婚财产分割协议书
2015/08/11 职场文书