前端日常实践：121#视频演示如何使用CSS和D3制作小鱼游动的交互动画
时间：2023-03-30 22:37:47
CSS
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击全屏预览的链接。https://codepen.io/comehop??e/pen/bxwpER互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cWJmLh6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器中包含的子元素分别代表鱼的身体、眼睛、背鳍和尾巴：
设置页面样式为全屏无滚动条：正文{保证金：0;宽度：100vw；高度：100vh；背景色：#222；overflow:hidden;}定义fish容器的大小，--r是一个基本的大小单位，后面所有的大小都是以此为基础计算的：.fish{position:absolute;--r:15vw;宽度：calc(var(--r)+var(--r)/3);高度：计算（var（--r）*2）；左：50%；top:100px;}draw输出鱼的身体，并向父类声明鱼的颜色，因为下面会用到这个颜色：.fish{color:hsl(0,50%,50%);}.fish.body{位置：绝对;边框：var(--r)实心透明；右边框颜色：currentColor；border-left-style:none;}画鱼眼：.fish.eye{position:absolute;--r1:计算(var(--r)/4);宽度：var(--r1);高度：var(--r1);背景色：#111；边界半径：50%；顶部：35%；左：30%；}画鱼的背鳍：.fish。fin{位置：绝对；--r2:计算(var(--r)/2);border-bottom:var(--r2)solid;border-left:var(--r2)solidtransparent;过滤器：亮度（2.5）；左：calc(var(--r)-var(--r2));}画鱼的尾巴：.fish.tail{position:absolute;--r3:计算(var(--r)/3);边框：var(--r3)实心透明；右边框颜色：currentColor；左边框样式：无；右：0；top:calc(var(--r)-var(--r3));}增加让鱼游动的动画效果，而不是循环，但只有一次：.fish{right:calc(var(--r)*-1);动画：向前直线跑3秒；}@keyframes运行{到{对：100%；}}添加鱼游泳时晃动的动画效果：.fish{animation:run3slinearforward,shake0.3slinearinfinite;}@keyframesshake{50%{transform:rotateY(-30deg);}100%{变换：rotateY(30deg);}}接下来，设置一些变量来创建不同的鱼：fishsizevariable--size，值越大，尺寸越大：.fish{--size:5;--r:calc(var(--size)*1vw);}鱼的颜色变量--color，代表色相圈的角度：.鱼{--color:0;color:hsl(var(--color),50%,50%));}鱼从右游到左的时长，时长越短游得越快：.fish{--duration:3;animation:runcalc(var(--duration)*1s)linearforwards,shake0.3slinearinfinite;}鱼出现的高度，数据越大越靠近页面底部：.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，值rangeof--top取值范围为100~300：functionbuildFish(){letfish=d3.select('body').append('div').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');}绑定鼠标点击事件，当鼠标按下时生成一条鱼：functionbuildFish(e){//slightly....style('--top',e.clientY);}window.addEventListener('click',buildFish);并让鱼嘴和点击的位置在一条水平线上：.fish{top:calc(var(--top)*1px-var(--r));}最后在页面加载时自动生成3条鱼，以免页面加载后空白：functionbuildFish(e){//slightly....style('--top',e?e.clientY:d3.randomUniform(100,300)());}d3.range(3).f或每个（buildFish）；你完成了！
