怎么用CSS和D3实现小鱼游动的交互动画

设置页面样式为全屏且没有滚动条：

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库：

删除掉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实现小鱼游动的交互动画”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享文章：怎么用CSS和D3实现小鱼游动的交互动画
标题URL：http://kswjz.com/article/iipdgs.html