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实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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数据类型之布尔型的介绍
2013/04/28 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
浅析php header 跳转
2013/06/17 PHP
PHP中文编码小技巧
2014/12/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
Javascript复制实例详解
2016/01/28 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
员工拓展培训方案
2014/02/15 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
投标授权委托书范文
2014/08/02 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技
PYTHON InceptionV3模型的复现详解
2022/05/06 Python