效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

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 特效的更多相关文章

  1. 如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...

  2. 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  3. 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...

  4. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...

  5. 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...

  6. 27.纯 CSS 创作一个精彩的彩虹 loading 特效

    原文地址:https://segmentfault.com/a/1190000014939781 感想:正方形->圆->旋转一定角度->动画->隐藏下一半 HTML代码: &l ...

  7. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  8. 前端每日实战:55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可 ...

  9. 前端每日实战:42# 视频演示如何用纯 CSS 创作一个均衡器 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频 ...

随机推荐

  1. 52)PHP,加了单例模式的数据库代码

    <?php class db { public $host ;//= "localhost";//定义默认连接方式 public $User;//= "root&q ...

  2. O - Snacks(DFS序)

    百度科技园内有nn个零食机,零食机之间通过n−1n−1条路相互连通.每个零食机都有一个值vv,表示为小度熊提供零食的价值. 由于零食被频繁的消耗和补充,零食机的价值vv会时常发生变化.小度熊只能从编号 ...

  3. 初识OpenGl

    函数命名规则 OpenGl函数都遵循一个命名约定:<库前缀> <根命令> <可选参数个数> <可选参数类型> 如:glColor3f() ,gl:核心库 ...

  4. Listening-lecture|主旨题|术语解释|举例原则|Crash course 哔哩哔哩

    Listening-lecture: Major topic: SP1---detail---detail---detail SP2---detail---detail---detail Crash ...

  5. hibernate中lazy的使用

    lazy,延迟加载 Lazy的有效期:只有在session打开的时候才有效:session关闭后lazy就没效了. lazy策略可以用在: * <class>标签上:可以取值true/fa ...

  6. PowerDesign15连接数据库并反向表结构详细

    10.0 sql2008 11.0 sql2010 这的服务器名称,复制到上面 这里的默认数据库不要改.Powerdesign会把自已的数据也存在默认的数据库里 一般不用改 测试 成功 这里ODBC的 ...

  7. android apk 文件反编译

    最近,自己坑逼的把一个android 项目修改版本的代码删除了.这个项目居然还没上传到源代码管理器.幸好还有apk文件,修改的代码也不多可以反编译一下. 1.下载 dex2jar  获取源码工具  地 ...

  8. 《Java 面试问题 一 Spring 、SpringMVC 、Mybatis》

    自己理解SSM框架可能问到的面试问题 一.需要知道的SSM基础知识 1.什么是Spring? Spring 是一款轻量级的 IOC (依赖反转) 和  APO (面向切面) 容器框架.(个人理解: 就 ...

  9. CF-1111B-Average Superhero Gang Power

    首先,对于这题我们要知道要删除一个数使平均值最大一定是删除最小的数,然后我们假设删除操作执行了i次,也就是删除最小的i个数.在已知删除操作次数之后求增加操作的次数就容易了,当然是m - i和k * ( ...

  10. 分布式Web服务器架构(通俗易通)

    最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们只关注架构的演变历程,因此就假设这个时候已经是托管了一台主机,并且有一定的带宽了,这个时候由于网 ...