前端每日实战:27# 视频演示如何用纯 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;
}
大功告成!
前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效的更多相关文章
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...
- 27.纯 CSS 创作一个精彩的彩虹 loading 特效
原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可 ...
- 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...
随机推荐
- logService
vpackage org.linlinjava.litemall.admin.service; import org.apache.shiro.SecurityUtils; import org.ap ...
- svn http
yum install -y httpd subversion mod_dav_svn mkdir -p /var/lib/svn cd /var/lib/svn svnadmin create de ...
- RDD(八)——缓存与检查点
RDD通过persist方法或cache方法可以将前面的计算结果缓存,默认情况下 persist() 会把数据以序列化的形式缓存在 JVM 的堆空间中. 但是并不是这两个方法被调用时立即缓存,而是触发 ...
- java word另存为word xml格式
1.jacob-1.15-M3-x86.dll copy到c:\\windows\system32 2.引入jacob.jar 把jacob.dll(不同版本的jacob的dll文件名有所不同)复制到 ...
- [LC] 105. Construct Binary Tree from Preorder and Inorder Traversal
Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- Oralce获取32位随机数
SELECT SYS_GUID() from dual;
- 安装与使用django-restframework
django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用 在settings.py中注册: INSTA ...
- 10X genomics|cell base|in-vivo based|model organisms|SBI|
生命组学-药物基因组学 精准医学的内容有个人全基因组测序,移动可穿戴设备,它可以实时监测,深度学习模型预测疾病,对疾病预测做到有效.安全和可控. 药物基因组学就是研究疾病.化合物和靶点之间的关系,关键 ...
- jmeter后置处理器之Json提取器详解
此提取器用于提取请求返回结果中的某个值或者某一组值,用法比正则表达式要简单,标准写法为$.key,其中key为返回结果map中的一个键,如果是多层则继续用.key进行即可,如果遇到key的value值 ...
- CF-1066B-Heaters
这题就是从1到n点进行遍历,对未加热的点找到最远的能加热到这个点的点,还是看代码讲吧 #include"bits/stdc++.h" using namespace std; co ...