html 彩虹色,CSS3 彩虹色LOADING动效
CSS
语言：
CSSSCSS
确定
.arc {
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
-webkit-animation: spin ease 1.4s infinite both;
animation: spin ease 1.4s infinite both;
}
.arc:nth-child(1) {
background: #E31D28;
width: 490px;
height: 490px;
margin-left: -245px;
margin-top: -245px;
clip: rect(0 490px 245px 0);
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.arc:nth-child(2) {
background: #ED8C3D;
width: 420px;
height: 420px;
margin-left: -210px;
margin-top: -210px;
clip: rect(0 420px 210px 0);
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.arc:nth-child(3) {
background: #FCD234;
width: 350px;
height: 350px;
margin-left: -175px;
margin-top: -175px;
clip: rect(0 350px 175px 0);
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.arc:nth-child(4) {
background: #3E9965;
width: 280px;
height: 280px;
margin-left: -140px;
margin-top: -140px;
clip: rect(0 280px 140px 0);
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.arc:nth-child(5) {
background: #295167;
width: 210px;
height: 210px;
margin-left: -105px;
margin-top: -105px;
clip: rect(0 210px 105px 0);
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.arc:nth-child(6) {
background: #492245;
width: 140px;
height: 140px;
margin-left: -70px;
margin-top: -70px;
clip: rect(0 140px 70px 0);
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.arc:nth-child(7) {
background: #FDFAD8;
width: 70px;
height: 70px;
margin-left: -35px;
margin-top: -35px;
clip: rect(0 70px 35px 0);
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#rainbow {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 490px;
height: 490px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
to {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
to {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
}
body {
background: #FDFAD8;
overflow: hidden;
}
html 彩虹色,CSS3 彩虹色LOADING动效相关推荐
- 一个绚丽的loading动效分析与实现！
最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...
- Android 一个绚丽的loading动效分析与实现！
http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...
- 绚丽风车loading动效分析与实现！
前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loading,问我能不能实现,看了下效果确实不错,也还比较有新意,复杂度也不是非常高,所以就花时间给做了,我们先一起看下原 ...
- 每日一篇系列---CSS3实现下雨动效
今日份笔记,下雨动效. 先前实现类似的天气动效,都是麻烦UI大佬给做的图,这次使用CSS3来实现一个. 一.准备工作 首先介绍下实现主要会用到的CSS3属性:box-shadow box-shadow ...
- html box 竖线,CSS3 小竖条脉冲型LOADING动效
CSS 语言: CSSSCSS 确定 .loader-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: ...
- div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言 上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
- 详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言 前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
- 干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言 依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
- 干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)
前言 CSS3的滤镜真的是一个非常强大的功能,如果我们能够很好的利用它,并充分发挥我们的想象力,想要制作出非常惊艳的动效也是没有问题的哦.比如:接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的a ...
最新文章
- Ubuntu最简单的方式安装NVIDIA显卡驱动和cuda工具
- cordova 不打开浏览器_[Cordova inAppBrowser 在App内打开浏览器]
- python上传文件到windows_python自动化-WinSpy+pywin32文件上传操作
- 大容量磁盘分区表、文件系统、分区工具的选择
- A1051. DNA序列
- day6 java成员变量与局部变量以及对象的建立
- MapReduce实现词频统计
- 电子工业出版社PPT图书优秀作者上海书城讲座
- 入手mac后，这5个技巧和窍门你应该知道
- ML/DL-复习笔记【一】- 数学基础（线性代数、概率论、数值分析）
- 函数指针还是c++虚函数_C和C++哪个效率更高？
- 如何获得微信小游戏源码
- cassandra数据库可视化工具
- 商业计划书PPT模板
- 关于嵌入式的bin、hex、axf、map
- 最全的期货交易术语在这里
- 2020年的成长印记
- HTML 几种特别分割线特效
- qt登录界面简单制作，是真的保姆级别了！！！
- jQuery中ajax用form表单方式提交数据