源代码下载

 

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

 

　　代码解读

 

　　定义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);

 

　　大功告成！









本文转载自中文网