利用box-shadow制作loading图
2015-08-02 21:28
369 查看
我们见过很多利用css3做的loading图,像下面这种应该是很常见的。通常制作这种loading,我们会一个标签对应一个圆,八个圆就要八个标签。但是这种做法很浪费资源。我们可以只用一个标签,然后利用
.loading { font-size: 30px; width: 1em; height: 1em; border-radius: 50%; margin: 100px auto; box-shadow: 0 -2em rgba(255, 0, 0, 1), 1.414em -1.414em rgba(255, 0, 0, 0.875), 2em 0 rgba(255, 0, 0, 0.75), 1.414em 1.414em rgba(255, 0, 0, 0.625), 0 2em rgba(255, 0, 0, 0.5), -1.414em 1.414em rgba(255, 0, 0, 0.375), -2em 0 rgba(255, 0, 0, 0.25), -1.414em -1.414em rgba(255, 0, 0, 0.125); animation: rotate 1s infinite forwards steps(8, end);}@keyframes rotate { 100% { -moz-transform: rotate(360deg); }}
首先,需要一个标签:
然后是css:
单位用的是
关键css就是:
需要用到多重阴影,每一个阴影就是一个圆了。设置它们的坐标需要用到三角函数。先要设定一个半径(如2em),然后360度平均分成8份,每份是45度,利用三角函数就可以计算阴影的偏移位置了。还有就是圆的颜色渐变,就是设置它们的不同透明度。
上面做出来的是静态的,还需要让它动起来:
好了,上面就是全部的代码了,很少。上面的
box—shadow来制作一个loading图。
.loading { font-size: 30px; width: 1em; height: 1em; border-radius: 50%; margin: 100px auto; box-shadow: 0 -2em rgba(255, 0, 0, 1), 1.414em -1.414em rgba(255, 0, 0, 0.875), 2em 0 rgba(255, 0, 0, 0.75), 1.414em 1.414em rgba(255, 0, 0, 0.625), 0 2em rgba(255, 0, 0, 0.5), -1.414em 1.414em rgba(255, 0, 0, 0.375), -2em 0 rgba(255, 0, 0, 0.25), -1.414em -1.414em rgba(255, 0, 0, 0.125); animation: rotate 1s infinite forwards steps(8, end);}@keyframes rotate { 100% { -moz-transform: rotate(360deg); }}
首先,需要一个标签:
<div class="loading"></div>
然后是css:
$fontSize: 30px; $radius: 2em; .loading { font-size: $fontSize; width: 1em; height: 1em; border-radius: 50%; margin: 100px auto; box-shadow: 0 -2em rgba(255, 0, 0, 1), 1.414em -1.414em rgba(255, 0, 0, 0.875), 2em 0 rgba(255, 0, 0, 0.75), 1.414em 1.414em rgba(255, 0, 0, 0.625), 0 2em rgba(255, 0, 0, 0.5), -1.414em 1.414em rgba(255, 0, 0, 0.375), -2em 0 rgba(255, 0, 0, 0.25), -1.414em -1.414em rgba(255, 0, 0, 0.125); }
单位用的是
em,这样如果要修改圆的大小,就只需要修改
font-size就可以了,如果用
px的话,一旦需要修改大小,那么涉及单位的就都要修改了。
关键css就是:
box-shadow: 0 -2em rgba(255, 0, 0, 1), 1.414em -1.414em rgba(255, 0, 0, 0.875), 2em 0 rgba(255, 0, 0, 0.75), 1.414em 1.414em rgba(255, 0, 0, 0.625), 0 2em rgba(255, 0, 0, 0.5), -1.414em 1.414em rgba(255, 0, 0, 0.375), -2em 0 rgba(255, 0, 0, 0.25), -1.414em -1.414em rgba(255, 0, 0, 0.125);
需要用到多重阴影,每一个阴影就是一个圆了。设置它们的坐标需要用到三角函数。先要设定一个半径(如2em),然后360度平均分成8份,每份是45度,利用三角函数就可以计算阴影的偏移位置了。还有就是圆的颜色渐变,就是设置它们的不同透明度。
上面做出来的是静态的,还需要让它动起来:
$fontSize: 30px; $radius: 2em; .loading { font-size: $fontSize; width: 1em; height: 1em; border-radius: 50%; margin: 100px auto; box-shadow: 0 -2em rgba(255, 0, 0, 1), 1.414em -1.414em rgba(255, 0, 0, 0.875), 2em 0 rgba(255, 0, 0, 0.75), 1.414em 1.414em rgba(255, 0, 0, 0.625), 0 2em rgba(255, 0, 0, 0.5), -1.414em 1.414em rgba(255, 0, 0, 0.375), -2em 0 rgba(255, 0, 0, 0.25), -1.414em -1.414em rgba(255, 0, 0, 0.125); animation: rotate 1s infinite forwards steps(8, end); } @keyframes rotate { 100% { transform: rotate(360deg); } }
steps()这个函数可以让动画分步进行,而不是连贯性的。
好了,上面就是全部的代码了,很少。上面的
box-shadow其实我是手算的,本来我想利用sass的
for循环计算的,结果没有成功。希望高手能指点一下。
相关文章推荐
- angularJS 服务--$provide里factory、service方法
- Frequentist和Bayesian的差别
- repair windows ntfs part on ubuntu
- Python网络编程之TCP通信实例和socketserver框架使用例子
- Linux学习笔记02之文件管理
- linux下打开windows txt文件中文乱码解决方法
- LeetCode242——Valid Anagram
- zoj 3460 Missile 【二分 + 二分图匹配】 【经典建模】 【二分 + 最大流】
- 递归函数的非递归化
- angularJS--多个控制器之间的数据共享
- java中文件的绝对路径,相对路径和抽象路径
- 异常类
- Binary Tree Maximum Path Sum
- (转)最小生成树
- angularJS--多个控制器之间的数据共享
- Android OpenGL ES2.0之光照的学习总结
- MAP基本操作函数
- 请高手指点,PHP问题,解密出一个文件,不知道这个是什么用的,怎么使用,谢谢好友指点
- 《MFC游戏开发》笔记八 游戏特效的实现(二):粒子系统
- 《MFC游戏开发》笔记九 游戏中的碰撞判定初步&怪物运动简单AI