如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/vjvoow
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cPLGLhV
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom:
<div class="rainbow">
<div class="bows">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
居中显示:
html, body, .bows {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
定义彩虹的尺寸:
.rainbow {
width: 20em;
height: 10em;
}
定义彩虹内拱形的尺寸:
.bows {
width: 100%;
height: 200%;
position: relative;
}
定义彩虹内所有拱形共有的特性:
.bows {
transform: rotate(225deg);
}
.bows span {
position: absolute;
width: calc(100% - 2em * (var(--n) - 1));
height: calc(100% - 2em * (var(--n) - 1));
border: 1em solid var(--color);
box-sizing: border-box;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
}
分别设置每个拱形的个性变量:
.bows span:nth-child(1) {
--n: 1;
--color: orangered;
}
.bows span:nth-child(2) {
--n: 2;
--color: orange;
}
.bows span:nth-child(3) {
--n: 3;
--color: yellow;
}
.bows span:nth-child(4) {
--n: 4;
--color: mediumspringgreen;
}
.bows span:nth-child(5) {
--n: 5;
--color: deepskyblue;
}
.bows span:nth-child(6) {
--n: 6;
--color: mediumpurple;
}
定义动画效果:
.bows span {
animation: rotating 3s infinite;
animation-delay: calc(0.05s * var(--n));
}
@keyframes rotating {
0%, 20% {
transform: rotate(0deg);
}
80%, 100% {
transform: rotate(360deg);
}
}
最后,隐藏掉容器之外的内容:
.rainbow {
overflow: hidden;
}
大功告成!
原文地址:https://segmentfault.com/a/1190000014939781
如何用纯 CSS 创作一个精彩的彩虹 loading 特效的更多相关文章
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 27.纯 CSS 创作一个精彩的彩虹 loading 特效
原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...
- 如何用纯 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 可交互视频教程 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
随机推荐
- linux中~和/,$和#的区别
/是目录层的分隔.表示符.只有一个/表明是root,/etc/表明是根目录下面的etc目录(当然目录最后不需要/,但有/直接表明他是目录,没有末尾的/,那么/etc需要检测一下确定是目录还是文件,虽然 ...
- readerwriterqueue 一个用 C++ 实现的快速无锁队列
https://www.oschina.net/translate/a-fast-lock-free-queue-for-cpp?cmp&p=2 A single-producer, sing ...
- 发送http请求和https请求的工具类
package com.haiyisoft.cAssistant.utils; import java.io.IOException;import java.util.ArrayList; impor ...
- 自然语言20.1 WordNet介绍和使用
https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149(欢迎关注博主 ...
- PHP安装 (结合之前的nginx安装与mysql安装组合为lnmp)
检查安装PHP所需的lib库 yum -y install zlib-devel libxml2-devel libjpeg-devel libjpeg-turbo-devel libiconv-de ...
- LC 889. Construct Binary Tree from Preorder and Postorder Traversal
Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...
- 爬虫 selenium + phantomjs / chrome
selenium 模块 Web自动化测试工具, 可运行在浏览器,根据指定命令操作浏览器, 必须与第三方浏览器结合使用 安装 sudo pip3 install selenium phantomjs 浏 ...
- 绝对好用Flash多文件大文件上传控件
本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释.绝对好用,支持单文件.多文件上传,支持大文件上传,已经过多方面测试,保证好用. 以 ...
- C基础知识(11):错误处理
C语言不提供对错误处理的直接支持,但是作为一种系统编程语言,它以返回值的形式允许您访问底层数据.在发生错误时,大多数的C或UNIX函数调用返回1或NULL,同时会设置一个错误代码errno,该错误代码 ...
- appium+python+windows环境配置
一.安装node.js 1:先找到对于电脑合适的node版本进行下载. 我的云盘node版本是7.8.0.地址如下:https://pan.baidu.com/s/19kcpXhCN1AuJAT9CB ...