效果预览

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

https://codepen.io/comehope/pen/ejZWKL

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cawq6cB

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 9 个元素:

<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

定义容器尺寸:

.container {
width: 30em;
height: 30em;
font-size: 12px;
}

设置容器中线条的样式:

.container {
color: lime;
} .container span {
position: absolute;
width: 5em;
height: 5em;
border-style: solid;
border-width: 1em 1em 0 0;
border-color: currentColor transparent;
border-radius: 50%;
}

让线条在容器中居中显示:

.container {
display: flex;
align-items: center;
justify-content: center;
}

定义变量,使线条从中心向外侧逐渐延伸:

.container span {
--diameter: calc(5em + (var(--n) - 1) * 3em);
width: var(--diameter);
height: var(--diameter);
} .container span:nth-child(1) {
--n: 1;
} .container span:nth-child(2) {
--n: 2;
} .container span:nth-child(3) {
--n: 3;
} .container span:nth-child(4) {
--n: 4;
} .container span:nth-child(5) {
--n: 5;
} .container span:nth-child(6) {
--n: 6;
} .container span:nth-child(7) {
--n: 7;
} .container span:nth-child(8) {
--n: 8;
} .container span:nth-child(9) {
--n: 9;
}

设置让线条旋转的动画效果:

.container span {
animation: rotating linear infinite;
animation-duration: calc(5s / (9 - var(--n) + 1));
} @keyframes rotating {
to {
transform: rotate(1turn);
}
}

定义改变颜色的动画效果,以色相环一周 360 度为 100%,--percent 变量是指位于这个 100% 的哪个位置:

@keyframes change-color {
0%, 100% {
--percent: 0;
} 10% {
--percent: 10;
} 20% {
--percent: 20;
} 30% {
--percent: 30;
} 40% {
--percent: 40;
} 50% {
--percent: 50;
} 60% {
--percent: 60;
} 70% {
--percent: 70;
} 80% {
--percent: 80;
} 90% {
--percent: 90;
}
}

最后,把改变颜色的动画效果应用到容器上:

.container {
--deg: calc(var(--percent) / 100 * 360deg);
color: hsl(var(--deg), 100%, 50%);
animation: change-color 5s linear infinite;
}

大功告成!

前端每日实战:81# 视频演示如何用纯 CSS 创作一个变色旋转动画的更多相关文章

  1. 前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画

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

  2. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

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

  3. 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

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

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

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

  5. 前端每日实战:2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

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

  6. 如何用纯 CSS 创作一个变色旋转动画

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

  7. 如何用纯 CSS 创作一个方块旋转动画

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

  8. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

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

  9. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

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

随机推荐

  1. 数据中 int 转 double 方式

    在mysql 中,得出一个int整数型数值 int整数值/int整数值   在被引用时,发现还是int类型 但是实际需要转换为 double 小数类型 查看相关函数,没有找到好的方法 后采用了 rou ...

  2. 二分查找法:x 的平方根

    实现 int sqrt(int x) 函数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. public int mySqrt(int x) { long left=0; long r ...

  3. day 109结算中心.

    from django.db import models from django.contrib.contenttypes.fields import GenericForeignKey,Generi ...

  4. MSF——基本使用和Exploit模块(一)

    MSF系列: MSF——基本使用和Exploit模块(一) MSF——Payload模块(二) MSF——Meterpreter(三) MSF——信息收集(四) MSF——Metasploit Fra ...

  5. .gz文件解压

    有时我们明明已经使用gunzip命令解压.gz文件了,可解压生成的文件却依然无法正常读取.如输入命令gunzip HelloWorld.java.gz后,解压生成HelloWorld.java文件,却 ...

  6. mysql 性能调优 参数随写

    set global innodb_buffer_pool_size = 12*1024*1024*1024;set global bulk_insert_buffer_size = 12582912 ...

  7. redis 入门之有序集合

    zadd 将一个或多个 member 元素及其 score 值加入到有序集 key 当中.如果某个 member 已经是有序集的成员,那么更新这个 member 的 score 值,并通过重新插入这个 ...

  8. 2019 牛客多校第一场 B Integration

    题目链接:https://ac.nowcoder.com/acm/contest/881/B 题目大意 给定 n 个不同的正整数 ai,求$\frac{1}{\pi}\int_{0}^{\infty} ...

  9. java面试题-看到那记录到哪

    哈希冲突 如果两个不同的元素,通过哈希函数得到的实际存储地址相同怎么办?也就是说,当我们对某个元素进行哈希运算,得到一个存储地址,然后要进行插入的时候,发现已经被其他元素占用了,其实这就是所谓的哈希冲 ...

  10. 63.Perfect Squares(完美平方数)

    Level:   Medium 题目描述: Given a positive integer n, find the least number of perfect square numbers (f ...