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 相关文章推荐
css3media响应式布局实例
Jul 08 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php实现学生管理系统
2020/03/21 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python调用shell的方法
2013/11/20 Python
Python中random模块生成随机数详解
2016/03/10 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
信息部岗位职责
2013/11/12 职场文书
个人公开承诺书
2014/03/28 职场文书
天那边观后感
2015/06/09 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python