前端每日实战: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 可交互视频教程 此视频 ...
随机推荐
- 吴裕雄--天生自然C语言开发:强制类型转换
#include <stdio.h> int main() { , count = ; double mean; mean = (double) sum / count; printf(& ...
- appium自动化的工作原理(1)
用appium开发移动端自动化测试脚本这么长时间,还没有认证的了解下它的原理是什么,到底是如何实现的呢? 1.先看一个Appium加载的过程图解(来自:了解appium自动化的工作原理--https: ...
- 概率DP——BZOJ4008 [HNOI2015]亚瑟王
[HNOI2015]亚瑟王 Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂 ...
- 【ubuntu】乱七八糟
https://blog.csdn.net/totorocyx/article/details/80032556 https://blog.csdn.net/weixin_40662331/artic ...
- 1059 C语言竞赛 (20 分)
题目:1059 C语言竞赛 (20 分) C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生 ...
- vue基本配置和生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- mac搭建本地服务器
目录 基础部分 1234 启动服务器添加自定义文档到本地服务器查看自定义效果手机/其他电脑 访问本机服务器 说明:本地开发需要搭建本地服务器进行页面的调试,mac系统自带apache服务,本篇日志是针 ...
- StartDT AI Lab | 视觉智能引擎——Re-ID赋能线下场景顾客数字化
人货场的思路是整个新零售数字化链路的核心,人是整个业务生命周期的起始点,图像算法的首要目标就是从图像中得到“人” .前一篇我们主要讲了Face ID的发展,Face ID帮助商家赋能了线下用户画像,把 ...
- [LC] 114. Flatten Binary Tree to Linked List
Given a binary tree, flatten it to a linked list in-place. For example, given the following tree: 1 ...
- 瑞星:以虚拟化安全“Hold住”企业用户
自从云计算的概念诞生的哪一天起,就吸引了无数人的目光.自从2006年开始,云计算经过了雾里看花的朦胧.众说纷纭的迷茫,到现在各类应用与服务呈现出了百花齐放的姿态,引领着信息科技迈入了新纪元,而服务器虚 ...