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组件化之搭建组件化项目框架
一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...
随机推荐
- Dynamic Rankings(动态第k大+树套树)
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1112 题目: 思路: 树套树板子题. 代码实现如下: #inclu ...
- shell脚本-监控及邮件提醒
首先写一个邮件提醒python文件 #!/usr/bin/python # -*- coding: UTF-8 -*- import sys import smtplib import email.m ...
- 树形dp(A - Anniversary party HDU - 1520 )
题目链接:https://cn.vjudge.net/contest/277955#problem/A 题目大意:略 具体思路:刚开始接触树形dp,说一下我对这个题的初步理解吧,首先,我们从根节点开始 ...
- 差分约束系统+输出路径(I - Advertisement POJ - 1752 )
题目链接:https://cn.vjudge.net/contest/276233#problem/I 题目大意:输入k和n,然后输入n行,每一次输入两个数,代表开端和结尾,如果这个区间内点的个数大于 ...
- 洛谷 P4093: bzoj 4553: [HEOI2016/TJOI2016]序列
题目传送门:洛谷P4093. 题意简述: 给定一个长度为 \(n\) 的序列 \(a\). 同时这个序列还可能发生变化,每一种变化 \((x_i,y_i)\) 对应着 \(a_{x_i}\) 可能变成 ...
- connect系统调用
/* * Attempt to connect to a socket with the server address. The address * is in user space so we ve ...
- Visual Studio 2017 for Mac
Visual Studio 2017 for Mac Last Update: 2017/6/16 我们非常荣幸地宣布 Visual Studio 2017 for Mac 现已推出. Visual ...
- Oracle学习笔记:parallel并行处理
在使用oracel查询时,可以通过并行提高查询速度.例如: ) from table_name a; 强行启用并行度来执行当前SQL.加上这个说明之后,可以强行启用Oracle的多线程处理功能,提高效 ...
- [新手]在macOS环境下安装xdebug
使用环境 masOS 10.12 使用MAMP安装的PHP环境 在新安装的系统中,安装xdebug,遇到了一些小问题; P.S. 重新按照xdebug官网的指南安装了一次,把上次安装失败的xd ...
- Java字符串常见实例与函数
字符串比较 字符串函数 compareTo (string) ,compareToIgnoreCase(String) 及 compareTo(object string) 来比较两个字符串,并返回字 ...