效果预览

在线演示

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

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;
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015655171

如何用纯 CSS 创作一个变色旋转动画的更多相关文章

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

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

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

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

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

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

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

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

  5. 如何用纯 CSS 创作一个雷达扫描动画

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

  6. 如何用纯 CSS 创作一个菱形 loader 动画

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

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

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

  8. 如何用纯 CSS 创作一个均衡器 loader 动画

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

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

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

随机推荐

  1. css从中挖去一个圆

    始终居中: width: 300px; position: fixed; /*在可视区域的上下左右居中*/ top: calc(50vh - 200px); left: calc(50vw - 150 ...

  2. Zabbix监控介绍及安装配置

    什么是zabbix zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...

  3. Exchange Powershell:Get-Counter (List connections to OWA )

    使用方法: Get-CASActiveUsers -server server1,server2 Get-CASMailbox | Get-CASActiveUsers $RPC = Get-Coun ...

  4. A Secure Cookie Protocol 安全cookie协议 配置服务器Cookie

    Title http://www.cse.msu.edu/~alexliu/publications/Cookie/cookie.pdf AbstractCookies are the primary ...

  5. Python resources

    我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列表,内容包括:Web框架.网络 ...

  6. ctf-HITCON-2016-houseoforange学习

    目录 堆溢出点 利用步骤 创建第一个house,修改top_chunk的size 创建第二个house,触发sysmalloc中的_int_free 创建第三个house,泄露libc和heap的地址 ...

  7. 设计模式之——Template模板模式

    Template模式又叫模板模式,是在父类中定义处理流程的框架,在子类中实现具体处理逻辑的模式.当父类的模板方法被调用时程序行为也会不同,但是,不论子类的具体实现如何,处理的流程都会按照父类中所定义的 ...

  8. 剑指Offer——不用加减乘除做加法

    题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 分析: "^"是不带进位的加法. "&"可以得到所有进位位组 ...

  9. Apache mahout 源码阅读笔记-DataModel之UserBaseRecommender

    先来看一下使用流程: 1)拿到DataModel 2)定义相似度计算模型 PearsonCorrelationSimilarity 3)定义用户邻域计算模型 NearestNUserNeighborh ...

  10. linux内核获取当前进程路径分析

    一个简单的问题,·linux下获取当前进程.我们都知道在内核中获取当前进程可以利用current宏 #define get_current() (current_thread_info()->t ...