<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的更多相关文章

  1. CSS3组件化之ios版菊花loading

    <div class="juhua-loading"> <div class="jh-circle1 jh-circle-ios">&l ...

  2. CSS3组件化之圆波扩散

    本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...

  3. CSS3组件化之单线箭头

    <div class="parent-box"> <div class="top-arrow"></div> <div ...

  4. 实现checkbox组件化(Component)

    之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...

  5. Android 组件化/模块化之路——在展示层搭建MVP结构

    Android 组件化/模块化之路——在展示层搭建MVP结构 什么是MVP Model–View–Presenter (MVP) 源于 Model–View–Controller (MVC) 的结构设 ...

  6. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  7. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  8. iOS 从零到一搭建组件化项目框架

    随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手术的动刀口 ...

  9. Cocoapods组件化之搭建组件化项目框架

    一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...

随机推荐

  1. Java容器List接口

    List接口是Java中经常用到的接口,如果对具体的List实现类的特性不了解的话,可能会导致程序性能的下降,下面从原理上简单的介绍List的具体实现: 可以看到,List继承了Collection接 ...

  2. seq与Shell序列生成

    有时候可能有这样的需要:用Shell生成类似0001这样的序列作为批次号,这里整理了一下个人的方法 方法一:通过seq命令 seq命令可以生成从某个数字到递增到另一数字的序列.用法如下: # seq ...

  3. 【数据库】SQL经典面试题 - 行列转换二 - 列转行

    本帖子是行转列的一个逆向操作——列转行,看下面一个面试题 面试题2: 柠檬班第30期学生要毕业了,他们的Linux.MySQL.Java成绩数据表 tb_lemon_grade_column中, 表中 ...

  4. GreenTrend

    ExpertforSQLServer(4.7.2)和ZhuanCloud(1.0.0)工具收集内容(在个人笔记本上测试) --SZC_Info.txt :: SQL专家云 v1. :: 开始收集 :: ...

  5. yii验证系统学习记录,基于yiicms(二)

    /** * Validates the specified object. * @param \yii\base\Model $model the data model being validated ...

  6. [转]Laplace算子和Laplacian矩阵

    1 Laplace算子的物理意义 Laplace算子的定义为梯度的散度. 在Cartesian坐标系下也可表示为: 或者,它是Hessian矩阵的迹: 以热传导方程为例,因为热流与温度的梯度成正比,那 ...

  7. JAVA_OPTS讲解【转】

    JAVA_OPTS ,顾名思义,是用来设置JVM相关运行参数的变量. JAVA_OPTS="-server -Xms256m -Xmx512m -XX:PermSize=64M -XX:Ma ...

  8. 2018Java开发面经(持续更新)

    不要给自己挖坑!!!不要给自己挖坑!!!不要给自己挖坑!!!如果面试官只是问你了解xxx吗,如果不是很了解,就直接说不知道,不要说知道,不然面试官深问再不知道就印象很不好! 处女面送给了头条(北京)日 ...

  9. lumen 在AppServiceProvider 使用Illuminate\Support\Facades\Redis 报错

    这里需要注意 bootstrap/app.php中AppServiceProvider 和RedisServiceProvider 注入的先后顺序

  10. 一步一步学习IdentityServer4 (4) 处理特殊需求之-登录等待页面

    用IdentityServer3的时候登录如果采用Post方式大家会发现有中间有一个等待Submit空白页面,界面不友好,现在我想把这个修改自定义的页面Loading 在Identityserver3 ...