13518219792
小編給大家分享一下怎么用CSS和D3實現小魚游動的交互動畫，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創新互聯-專業網站定制、快速模板網站建設、高性價比燈塔網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式燈塔網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋燈塔地區。費用合理售后完善，10多年實體公司更值得信賴。
代碼解讀
定義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)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實現小魚游動的交互動畫”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！
