小编给大家分享一下怎么用CSS和D3实现小鱼游动的交互动画，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
代码解读
定义dom，容器中包含的子元素分别代表鱼的身体、眼睛、背鳍和尾巴：
<divclass="fish">
<spanclass="body"></span>
<spanclass="eye"></span>
<spanclass="fin"></span>
<spanclass="tail"></span>
</div>
设置页面样式为全屏且没有滚动条：
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)solidtransparent;
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)solidtransparent;
filter:brightness(2.5);
left:calc(var(--r)-var(--r2));
}
画出鱼的尾巴：
.fish.tail{
position:absolute;
--r3:calc(var(--r)/3);
border:var(--r3)solidtransparent;
border-right-color:currentColor;
border-left-style:none;
right:0;
top:calc(var(--r)-var(--r3));
}
增加让鱼游动的动画效果，不是循环执行，而是只执行一次：
.fish{
right:calc(var(--r)*-1);
animation:run3slinearforwards;
}
@keyframesrun{
to{
right:100%;
}
}
再增加鱼游动时摇摆的动画效果：
.fish{
animation:
run3slinearforwards,
shake0.3slinearinfinite;
}
@keyframesshake{
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:
runcalc(var(--duration)*1s)linearforwards,
shake0.3slinearinfinite;
}
鱼出现的高度，数据越大越靠近页面下部：
.fish{
--top:100;
top:calc(var(--top)*1px);
}
接下来用d3来批量处理dom元素和css变量。
引入d3库：
<scriptsrc="https://d3js.org/d3.v5.min.js"></script>
删除掉html中的.fish元素和css文件中的变量声明代码。创建一个函数，用于生成一条鱼。css变量的值均为随机生成，--size的取值范围是5~8，--color的取值范围是-60~15，--duration的取值范围是3~6，--top的取值范围是100~300：
functionbuildFish(){
letfish=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');
}
绑定鼠标单击事件，当按下鼠标时就生成一条鱼：
functionbuildFish(e){
//略....
.style('--top',e.clientY);
}
window.addEventListener('click',buildFish);
并且让鱼的嘴部和点击的位置在一条水平线上：
.fish{
top:calc(var(--top)*1px-var(--r));
}
最后，在页面载入时自动生成3条鱼，以免页面载入后一片空白：
functionbuildFish(e){
//略....
.style('--top',e?e.clientY:d3.randomUniform(100,300)());
}
d3.range(3).forEach(buildFish);
看完了这篇文章，相信你对“怎么用CSS和D3实现小鱼游动的交互动画”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
