效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom,容器中包含 6 个 内含 <span><div> 元素,每个 <div> 元素代表 1 个粒子:

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

居中显示:

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

定义容器尺寸:

.container {
width: 70vmin;
height: 70vmin;
}

在容器中定位 <div>,并在 <div> 中用 <span> 画出粒子:

.container {
display: flex;
align-items: center;
justify-content: center;
} .container div {
position: absolute;
width: 10vmin;
height: 10vmin;
} .container div span {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background-color: limegreen;
transform: translateX(300%);
}

用变量定义粒子的旋转角度,其中 --particles-per-circle 每圈的粒子数,因为每圈有 3 个粒子,所以圈中有 3 个位置,每个位置有 2 个粒子重叠在一起,此时看起来是只有 3 个粒子的样子:

.container {
--particles-per-circle: 3;
} .container div {
transform: rotate(calc(var(--n) / var(--particles-per-circle) * -360deg));
} .container div:nth-child(1) {
--n: 1;
} .container div:nth-child(2) {
--n: 2;
} .container div:nth-child(3) {
--n: 3;
} .container div:nth-child(4) {
--n: 4;
} .container div:nth-child(5) {
--n: 5;
} .container div:nth-child(6) {
--n: 6;
}

定义粒子从中心向外侧的运动效果:

.container div span {
animation: move 2s linear infinite;
} @keyframes move {
from {
transform: translateX(0) scale(0);
} 70% {
transform: translateX(210%) scale(0.55);
} to {
transform: translateX(300%) scale(0);
}
}

再增加运动时让粒子变色的效果,沿色相环取了 10 个颜色:

.container div span {
animation:
move 2s linear infinite,
change-color 2s linear infinite;
} @keyframes change-color {
0%, 100% {
background-color: hsl(calc(0 / 100 * 360deg), 80%, 55%);
} 10% {
background-color: hsl(calc(10 / 100 * 360deg), 80%, 55%);
} 20% {
background-color: hsl(calc(20 / 100 * 360deg), 80%, 55%);
} 30% {
background-color: hsl(calc(30 / 100 * 360deg), 80%, 55%);
} 40% {
background-color: hsl(calc(40 / 100 * 360deg), 80%, 55%);
} 50% {
background-color: hsl(calc(50 / 100 * 360deg), 80%, 55%);
} 60% {
background-color: hsl(calc(60 / 100 * 360deg), 80%, 55%);
} 70% {
background-color: hsl(calc(70 / 100 * 360deg), 80%, 55%);
} 80% {
background-color: hsl(calc(80 / 100 * 360deg), 80%, 55%);
} 90% {
background-color: hsl(calc(90 / 100 * 360deg), 80%, 55%);
}
}

用变量设置动画延时,这时可以看到 6 个粒子陆续出现了。其中 --circles 表示圈数;--particles 表示粒子数,它等于每圈的粒子数与圈数的积:

.container {
--circles: 2;
--particles: calc(var(--particles-per-circle) * var(--circles));
} .container div span {
animation-delay: calc(var(--n) / var(--particles) * -2s);
}

接下来用 d3 来批量创建粒子。
引入 d3 库:

<script src="https://d3js.org/d3.v5.min.js"></script>

用 d3 为 css 的 --particles-per-circle 和 --circles 变量赋值:

const PARTICLES_PER_CIRCLE = 3;
const CIRCLES = 2; d3.select('.container')
.style('--particles-per-circle', PARTICLES_PER_CIRCLE)
.style('--circles', CIRCLES);

用 d3 创建粒子 dom 元素:

const COUNT_OF_PARTICLES = PARTICLES_PER_CIRCLE * CIRCLES;

d3.select('.container')
.style('--particles-per-circle', PARTICLES_PER_CIRCLE)
.style('--circles', CIRCLES)
.selectAll('div')
.data(d3.range(COUNT_OF_PARTICLES))
.enter()
.append('div')
.append('span');

用 d3 为粒子元素的 --n 变量赋值:

d3.select('.container')
.style('--particles-per-circle', PARTICLES_PER_CIRCLE)
.style('--circles', CIRCLES)
.selectAll('div')
.data(d3.range(COUNT_OF_PARTICLES))
.enter()
.append('div')
.style('--n', (d) => d + 1)
.append('span');

删除掉 dom 中的粒子元素,以及用 css 声明的变量。

最后,调整每圈的粒子数和圈数,形成旋臂效果:

const PARTICLES_PER_CIRCLE = 14;
const CIRCLES = 4;

大功告成!

本文转载于:猿2048➼https://www.mk2048.com/blog/blog.php?id=hbh0chjhihj

前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画的更多相关文章

  1. 如何用 CSS 和 D3 创作旋臂粒子动画

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

  2. 前端每日实战:133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

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

  3. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

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

  4. 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

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

  5. 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

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

  6. 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

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

  7. 如何用 CSS 和 D3 创作火焰动画

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

  8. 如何用 CSS 和 D3 创作一个无尽的六边形空间

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

  9. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

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

随机推荐

  1. 分子动力学模拟之SETTLE约束算法

    技术背景 在上一篇文章中,我们讨论了在分子动力学里面使用LINCS约束算法及其在具备自动微分能力的Jax框架下的代码实现.约束算法,在分子动力学模拟的过程中时常会使用到,用于固定一些既定的成键关系.例 ...

  2. JZ-057-二叉树的下一个结点

    二叉树的下一个结点 题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 题目链接: 二叉树的下一个结点 代 ...

  3. 线上| 10万奖金!Greaterwms/DVAdmin插件开发者现金激励活动

    为激励广大开发者创作精神,Greaterwms/DVadmin插件开发者现金激励活动现已上线! 什么是GreaterWMS 完全开源仓储管理软件,遵循Apache License 2.0协议,前后端分 ...

  4. Linux安装JDK8环境

    1.下载JDK包 点击同意下载后,会让你注册oracel账号,登录了才能下载 2.上传到linux服务器,然后解压 解压命令(注意jdk的版本名称不一定相同): tar -zxvf jdk-8u181 ...

  5. x86-7-页式管理(Paging)

    x86-7-页式管理(Paging) 页式管理是重中之重! 在段式管理下操作系统的运作出现了很多问题,因为段的长度不定,在分配内存时,可能会发生内存中的空闲区域小于要加载的段,或者空闲区域远远大于要加 ...

  6. LGP7167题解

    考试的一道题,因为某些原因sb了常数翻了好几倍/px 首先我们发现,一个水池的水只会向它下边第一个直径比它大的水池流. 我们把这些流动的关系连边,很容易发现是一棵树. 问水最后会到哪个水池相当于在问最 ...

  7. 解决移动端ios网页端收起键盘导致的页面空白问题

    一句代码就搞定了,只要失焦的时候把窗口滚动位置设置到(0,0)就行了 <input type="text" onblur="window.scrollTo(0, 0 ...

  8. 使用Python 模拟RSA 加密与解密

    一.关于 RSA具体原理请移步其他文章,本文主要使用Python 来模拟RSA 算法的实现过程 二.简要分析 在RSA算法中,存在以下几个参数: 1.大素数p.q 2.n = p *q 3.Phi_n ...

  9. centos根目录扩容

    一.扫描磁盘 若已在虚拟机增加了磁盘且没看到磁盘 运行下面的命令来查找系统中所有的主机总线编号: # ls /sys/class/scsi_host 得到主机总线编号后,运行以下命令来发现新的磁盘: ...

  10. 线程 Threading

    import time from threading import Thread def func(): while True: time.sleep(0.5) print(123) def func ...