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
Sep 27 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
php实现点击可刷新验证码
2015/11/07 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python循环结构的应用场景详解
2019/07/11 Python
python 命名规范知识点汇总
2020/02/14 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
如何利用python读取micaps文件详解
2020/10/18 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
struct与class的区别
2014/02/03 面试题
《从现在开始》教学反思
2014/04/15 职场文书
车间统计员岗位职责
2015/04/14 职场文书
毕业赠语大全
2015/06/23 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
高中美术教学反思
2016/02/17 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
如何计划开一家便利店?
2019/07/31 职场文书