本篇文章给大家带来的内容是关于如何使用css和d3实现小鱼游动的交互动画（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含的子元素分别代表鱼的身体、眼睛、背鳍和尾巴：
登录后复制
设置页面样式为全屏且没有滚动条：
立即学习“前端免费学习笔记（深入）”；
- body { margin: 0; width: 100vw; height: 100vh; background-color: #222; overflow: hidden;}
登录后复制
定义鱼的容器尺寸，–r 是一个基本尺寸单位，后续所有尺寸都是基于它计算的：
- .fish { position: absolute; --r: 15vw; width: calc(var(--r) + var(--r) / 3); height: calc(var(--r) * 2); left: 50%; top: 100px;}
登录后复制
画出鱼的身体，同时把鱼的颜色声明到父类中，因为下面还会用到这个颜色：
- .fish { color: hsl(0, 50%, 50%);}.fish .body { position: absolute; border: var(--r) solid transparent; border-right-color: currentColor; border-left-style: none;}
登录后复制
画出鱼的眼睛：
- .fish .eye { position: absolute; --r1: calc(var(--r) / 4); width: var(--r1); height: var(--r1); background-color: #111; border-radius: 50%; top: 35%; left: 30%;}
登录后复制
画出鱼的背鳍：
- .fish .fin { position: absolute; --r2: calc(var(--r) / 2); border-bottom: var(--r2) solid; border-left: var(--r2) solid transparent; filter: brightness(2.5); left: calc(var(--r) - var(--r2));}
登录后复制
画出鱼的尾巴：
- .fish .tail { position: absolute; --r3: calc(var(--r) / 3); border: var(--r3) solid transparent; border-right-color: currentColor; border-left-style: none; right: 0; top: calc(var(--r) - var(--r3));}
登录后复制
增加让鱼游动的动画效果，不是循环执行，而是只执行一次：
- .fish { right: calc(var(--r) * -1); animation: run 3s linear forwards;}@keyframes run { to { right: 100%; }}
登录后复制
再增加鱼游动时摇摆的动画效果：
- .fish { animation: run 3s linear forwards, shake 0.3s linear infinite;}@keyframes shake { 50% { transform: rotateY(-30deg); } 100% { transform: rotateY(30deg); }}
登录后复制
接下来设置一些变量，以便创建不同样子的鱼：
鱼的大小的变量 –size，数值越大尺寸越大：
- .fish { --size: 5; --r: calc(var(--size) * 1vw);}
登录后复制
鱼的颜色变量 –color，表示色相环的角度：
- .fish { --color: 0; color: hsl(var(--color), 50%, 50%);}
登录后复制
鱼从右侧游到左侧的时长，时长越短游得越快：
- .fish { --duration: 3; animation: run calc(var(--duration) * 1s) linear forwards, shake 0.3s linear infinite;}
登录后复制
鱼出现的高度，数据越大越靠近页面下部：
- .fish { --top: 100; top: calc(var(--top) * 1px);}
登录后复制
接下来用 d3 来批量处理 dom 元素和 css 变量。
引入 d3 库：
登录后复制
删除掉 html 中的 .fish 元素和 css 文件中的变量声明代码。创建一个函数，用于生成一条鱼。css 变量的值均为随机生成，–size 的取值范围是 5 ~ 8，–color 的取值范围是 -60 ~ 15，–duration 的取值范围是 3 ~ 6，–top 的取值范围是 100 ~ 300：
- function buildFish() { let fish = d3.select('body') .append('p') .attr('class', 'fish') .style('--size', d3.randomUniform(5, 8)()) .style('--color', d3.randomUniform(-60, 15)()) .style('--duration', d3.randomUniform(3, 6)()) .style('--top', d3.randomUniform(100, 300)()); fish.append('span').attr('class', 'body'); fish.append('span').attr('class', 'eye'); fish.append('span').attr('class', 'fin'); fish.append('span').attr('class', 'tail');}
登录后复制
绑定鼠标单击事件，当按下鼠标时就生成一条鱼：
- function buildFish(e) { //略.... .style('--top', e.clientY);}window.addEventListener('click', buildFish);
登录后复制
并且让鱼的嘴部和点击的位置在一条水平线上：
- .fish { top: calc(var(--top) * 1px - var(--r));}
登录后复制
最后，在页面载入时自动生成 3 条鱼，以免页面载入后一片空白：
- function buildFish(e) { //略.... .style('--top', e ? e.clientY : d3.randomUniform(100, 300)());}d3.range(3).forEach(buildFish);
登录后复制
大功告成！
相关推荐：
如何使用纯CSS实现锡纸撕开的文字效果（附代码）
如何使用纯CSS实现锡纸撕开的文字效果（附代码）
以上就是如何使用CSS和D3实现小鱼游动的交互动画（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
