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 可交互视频教程 ...
随机推荐
- sourceInsight与IAR的同步
编写与编译二者同步:引用http://bbs.ednchina.com/BLOG_ARTICLE_3013475.HTM 1 在IAR中新建一个工程TEST.菜单栏 File->New-> ...
- 运行startup.bat的启动过程
一.前言 一般启动tomcat都是找到bin目录下的startup.bat(windows)下或者startup.sh(linux下),所以要研究tomcat的启动,startup脚本是避不开的.那么 ...
- 【linux】之常用命令-杂项
查看端口:lsof -i :80 二.内存大小[root@xbidc ~]# cat /proc/meminfo |grep MemTotalMemTotal: 1034612 kB[root@xbi ...
- 【springBoot】之概述
springboot是什么? springboot不是对spring的增强,而是一个快速使用spring进行开发的框架. 其产生的背景是因为随着动态语言(Scala,Groovy)的流行,Java语言 ...
- redis 安装配置 [转]
Redis是目前众多NoSQL产品中非常有特点的一款,支持的数据类型和方法都非常丰富,做为一款具备持久化功能的软件,实际使中更多却是将其做为cache. 三思在个人的测试环境中安装使用了两三天,这期间 ...
- Javascript中的原型、原型链(十)
一.原型 每当创建一个函数时,函数就会包含一个prototype属性,这个属性其实相当于一个指针,指向调用该构造函数创建的对象原型. 这个对象原型里面有一个constructor属性,这个属性又指向构 ...
- 修改ECSHOP的小数点保留位数
客户站点http://carfa.hk79.2ifree.com 原来的程序直接取整了,现在做下面修改. 首先打开文件 /carfa/web/includes/lib_common.php 第一步:在 ...
- VI使用手册(常见命令)
VI使用手册 模式切换 i键开始进入编辑模式,Esc进入一般模式,保存退出:wq,不保存退出q,强制退出q! 如何定位到行文档首位,行首位? gg或者1G命令将光标移动到文档开头G命令将光标移动到文档 ...
- CountDownLatch与join的区别和联系
首先,我们来看一个应用场景1: 假设一条流水线上有三个工作者:worker0,worker1,worker2.有一个任务的完成需要他们三者协作完成,worker2可以开始这个任务的前提是worker0 ...
- Android 运行时报错Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled. 的解决办法
解决方法:在菜单栏,Tools->Android->Enable ADB integration勾选就可以了.