CSS3组件化之菊花loading
<div class="juhua-loading">
<div class="jh-circle"></div>
<div class="jh-circle2 jh-circle"></div>
<div class="jh-circle3 jh-circle"></div>
<div class="jh-circle4 jh-circle"></div>
<div class="jh-circle5 jh-circle"></div>
<div class="jh-circle6 jh-circle"></div>
<div class="jh-circle7 jh-circle"></div>
<div class="jh-circle8 jh-circle"></div>
<div class="jh-circle9 jh-circle"></div>
<div class="jh-circle10 jh-circle"></div>
<div class="jh-circle11 jh-circle"></div>
<div class="jh-circle12 jh-circle"></div>
</div>
.juhua-loading {
position: relative;
width: 40px;
height: 40px;
}
.juhua-loading .jh-circle {
position: absolute;
left:;
top:;
width: 100%;
height: 100%;
}
.juhua-loading .jh-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
-webkit-animation: jh-circleFadeDelay 1.2s infinite ease-in-out both;
animation: jh-circleFadeDelay 1.2s infinite ease-in-out both;
}
.juhua-loading .jh-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.juhua-loading .jh-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.juhua-loading .jh-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.juhua-loading .jh-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.juhua-loading .jh-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
}
.juhua-loading .jh-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.juhua-loading .jh-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
}
.juhua-loading .jh-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
}
.juhua-loading .jh-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.juhua-loading .jh-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
}
.juhua-loading .jh-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
}
.juhua-loading .jh-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.juhua-loading .jh-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.juhua-loading .jh-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.juhua-loading .jh-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.juhua-loading .jh-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.juhua-loading .jh-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.juhua-loading .jh-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.juhua-loading .jh-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.juhua-loading .jh-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.juhua-loading .jh-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.juhua-loading .jh-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes jh-circleFadeDelay {
0%, 39%, 100% {
opacity:;
}
40% {
opacity:;
}
}
@keyframes jh-circleFadeDelay {
0%, 39%, 100% {
opacity:;
}
40% {
opacity:;
}
}
CSS3组件化之菊花loading的更多相关文章
- CSS3组件化之ios版菊花loading
<div class="juhua-loading"> <div class="jh-circle1 jh-circle-ios">&l ...
- CSS3组件化之圆波扩散
本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...
- CSS3组件化之单线箭头
<div class="parent-box"> <div class="top-arrow"></div> <div ...
- 实现checkbox组件化(Component)
之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...
- Android 组件化/模块化之路——在展示层搭建MVP结构
Android 组件化/模块化之路——在展示层搭建MVP结构 什么是MVP Model–View–Presenter (MVP) 源于 Model–View–Controller (MVC) 的结构设 ...
- 微信小程序组件化实践
Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- iOS 从零到一搭建组件化项目框架
随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手术的动刀口 ...
- Cocoapods组件化之搭建组件化项目框架
一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...
随机推荐
- HDU 4720 Naive and Silly Muggles 平面几何
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4720 解题报告:给出一个三角形的三个顶点坐标,要求用一个最小的圆将这个三个点都包含在内,另外输入一个点 ...
- 用threading和Queue模块实现多线程的端口扫描器
一.Queue模块基础 q = Queue.Queue() q.qsize() 返回队列的大小 q.empty() 如果队列为空,返回True,反之Fals ...
- Linux服务-配置Nginx反向代理
任务目标:实现基于轮询的方式调度三台web,并验证结果:实现基于权重的方式调度三台web,并验证结果:实现基于hash的方式调用三台web,并验证结果 由于刚刚做了nfs设置,为了提现实验结果,我在w ...
- ASP.NET 网站部署到IIS上如何进行调试
1:在一个网站成功部署后,有可能会遇到一些错误,但是又不能直接看出错误源(如果能在源程序里下断点进行调试就好了,这样就能准确的找出错误代码),下面介绍如何在一个已经部署的网站上进行断点调试(前提有网站 ...
- windows 批处理文件调用exe
@echo offstart "" "C:\Users\Administrator\Desktop\testtaotao\Debug\testtaotao.exe&quo ...
- 对web标准的理解,以及对w3c组织的认识
(1)web标准规范要求,书写标签必须闭合.标签小写.不乱嵌套,可提高搜索机器人对网页内容的搜索几率.--- SEO(2)建议使用外链css和js脚本,从而达到结构与行为.结构与表现的分离,提高页面的 ...
- python+selenium初学者常见问题处理
要做web自动化,第一件事情就是搭建自动化测试环境,那就没法避免的要用到selenium了. 那在搭建环境和使用过程中经常会遇到以下几类问题: 1.引入selenium包失败: 出现这种错误,一般分为 ...
- python函数,模块及eclipse配置python开发环境
一.eclipse的使用 1.作用 (1)最好用的IDE (2)可调式debug (3)查看可执行过程 (4)可查看源代码 2.安装eclipse及配置 目录安装Pythonpython for ec ...
- marshmallow: 简化Python对象系列化
转载:http://www.thinksaas.cn/topics/0/594/594368.html marshmallow -一个轻量级的库用于将复杂对象转成简单的Python数据类型.或从简单的 ...
- js对金额浮点数运算精度的处理方案
浮点数产生的原因 浮点数转二进制,会出现无限循环数,计算机又对无限循环小数进行舍入处理 js弱语言的解决方案 方法一: 指定要保留的小数位数(0.1+0.2).toFixed(1) = 0.3;这个方 ...