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动画按钮的实例教程
Nov 21 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php 数组使用详解 推荐
2011/06/02 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
微信小程序之选项卡的实现方法
2017/09/29 Javascript
原生js调用json方法总结
2018/02/22 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python验证码识别处理实例
2015/12/28 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python中正则表达式的使用方法
2018/02/25 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
Python 字符串池化的前提
2020/07/03 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
xxx同志考察材料
2014/02/07 职场文书
医德考评自我评价
2014/09/14 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
体育教师研修感悟
2015/11/18 职场文书