27.纯 CSS 创作一个精彩的彩虹 loading 特效
原文地址:https://segmentfault.com/a/1190000014939781
感想:正方形-》圆-》旋转一定角度-》动画-》隐藏下一半
HTML代码:
<div class="rainbow">
<div class="bows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
CSS代码:
html, body, .bows {
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: white;
}
.rainbow {
width: 20em;
height: 10em;
overflow: hidden;
}
.bows {
position: relative;
width: 100%;
height: 200%;
/* border: 1px solid blue; */
transform: rotate(225deg);
}
.bows span {
position: absolute;
width: calc(100% - 2em * (var(--n) - 1));
height: calc(100% - 2em * (var(--n) - 1));
padding:;
border: 1em solid var(--color);
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
animation: rotating 3s infinite;
animation-delay: calc(0.05s * var(--n));
}
@keyframes rotating {
0%, 20% {
transform: rotate(0deg);
}
80%, 100% {
transform: rotate(360deg);
}
}
.bows span:nth-child(1) {
--n:;
--color: orangered;
}
.bows span:nth-child(2) {
--n:;
--color: orange;
}
.bows span:nth-child(3) {
--n:;
--color: yellow;
}
.bows span:nth-child(4) {
--n:;
--color: mediumspringgreen;
}
.bows span:nth-child(5) {
--n:;
--color: deepskyblue;
}
.bows span:nth-child(6) {
--n:;
--color: mediumpurple;
}
27.纯 CSS 创作一个精彩的彩虹 loading 特效的更多相关文章
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
- 23.纯 CSS 创作一个菜单反色填充特效
原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个菜单反色填充特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...
随机推荐
- 修改docker容器的端口映射
大家都知道docker run可以指定端口映射,但是容器一旦生成,就没有一个命令可以直接修改.通常间接的办法是,保存镜像,再创建一个新的容器,在创建时指定新的端口映射. 有没有办法不保存镜像而直接修改 ...
- Spring cloud和Dubbo
dubbo由于是二进制的传输,占用带宽会更少springCloud是http协议传输,带宽会比较多,同时使用http协议一般会使用JSON报文,消耗会更大 dubbo的开发难度较大,原因是dubbo的 ...
- 【亲测】<g++/gcc>CentOS下g++: command not found问题的解决(c++环境安装)
CentOS下g++: command not found问题的解决 2017年02月27日 18:09:06 阅读数:5174 标签: centosgcc 更多 个人分类: 问题分析 版权声明: ...
- java反射以及动态代理的学习
java反射学习 1)字节码文件的三种获取方式 ①:Object类的getClass()方法:对象.getClass() ②:数据类型的静态的class属性:类名.class ③:通过Class类的静 ...
- S型顺序遍历二叉树(c++实现)
//1.s型顺序访问二叉树,默认先左后右:利用两个栈来实现:如果先右后左的话,改变一下入栈的顺序就行 //2.注意s1 s2插入栈的顺序是不同的 void S_LevelOrderPrint(Tree ...
- STL基础--String
String 构造 string s1("Hello"); string s2("Hello", 3); //s2: Hel string s3(s1, 2); ...
- 构建自己的代码库在Code-Google上
多年工作的代码,有不少可以抽象出来作为工具类的.如果每次都把项目的工具类存放到U盘.必然会造成维护的问题.主要是你不可能天天的带u盘 去代码里复制粘贴.去code.google.com建立自己的代码库 ...
- 【SQL Server】MS SQL Server中的CONVERT日期格式化大全
CONVERT 函数将某种数据类型的表达式显式转换为另一种数据类型.SQL Server中 将日期格式化. SQL Server 支持使用科威特算法的阿拉伯样式中的数据格式. 在表中,左侧的两列表示将 ...
- 配置Flink依赖的pom文件时报错:flink-clients_2.11 & flink-streaming-java_2.11
在配置eclipse上的pom文件时,在配置到flink-clients_2.11 和 flink-streaming-java_2.11这两个jar包的时候不管怎么弄都报错而且包一大堆错. 最难受的 ...
- 计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互时间:周期性执行或调用表达式之间的 ...