用HTML和CSS3做个鱼,如何使用CSS和D3实现小鱼游动的交互动画（附代码）
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于如何使用CSS和D3實(shí)現(xiàn)小魚游動(dòng)的交互動(dòng)畫(附代碼)，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。
效果預(yù)覽
源代碼下載
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義 dom，容器中包含的子元素分別代表魚的身體、眼睛、背鰭和尾巴：
設(shè)置頁面樣式為全屏且沒有滾動(dòng)條：body {
margin: 0;
width: 100vw;
height: 100vh;
background-color: #222;
overflow: hidden;
}
定義魚的容器尺寸，--r 是一個(gè)基本尺寸單位，后續(xù)所有尺寸都是基于它計(jì)算的：.fish {
position: absolute;
--r: 15vw;
width: calc(var(--r) + var(--r) / 3);
height: calc(var(--r) * 2);
left: 50%;
top: 100px;
}
畫出魚的身體，同時(shí)把魚的顏色聲明到父類中，因?yàn)橄旅孢€會(huì)用到這個(gè)顏色：.fish {
color: hsl(0, 50%, 50%);
}
.fish .body {
position: absolute;
border: var(--r) solid transparent;
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) solid transparent;
filter: brightness(2.5);
left: calc(var(--r) - var(--r2));
}
畫出魚的尾巴：.fish .tail {
position: absolute;
--r3: calc(var(--r) / 3);
border: var(--r3) solid transparent;
border-right-color: currentColor;
border-left-style: none;
right: 0;
top: calc(var(--r) - var(--r3));
}
增加讓魚游動(dòng)的動(dòng)畫效果，不是循環(huán)執(zhí)行，而是只執(zhí)行一次：.fish {
right: calc(var(--r) * -1);
animation: run 3s linear forwards;
}
@keyframes run {
to {
right: 100%;
}
}
再增加魚游動(dòng)時(shí)搖擺的動(dòng)畫效果：.fish {
animation:
run 3s linear forwards,
shake 0.3s linear infinite;
}
@keyframes shake {
50% {
transform: rotateY(-30deg);
}
100% {
transform: rotateY(30deg);
}
}
接下來設(shè)置一些變量，以便創(chuàng)建不同樣子的魚：
魚的大小的變量 --size，數(shù)值越大尺寸越大：.fish {
--size: 5;
--r: calc(var(--size) * 1vw);
}
魚的顏色變量 --color，表示色相環(huán)的角度：.fish {
--color: 0;
color: hsl(var(--color), 50%, 50%);
}
魚從右側(cè)游到左側(cè)的時(shí)長，時(shí)長越短游得越快：.fish {
--duration: 3;
animation:
run calc(var(--duration) * 1s) linear forwards,
shake 0.3s linear infinite;
}
魚出現(xiàn)的高度，數(shù)據(jù)越大越靠近頁面下部：.fish {
--top: 100;
top: calc(var(--top) * 1px);
}
接下來用 d3 來批量處理 dom 元素和 css 變量。
引入 d3 庫：
刪除掉 html 中的 .fish 元素和 css 文件中的變量聲明代碼。創(chuàng)建一個(gè)函數(shù)，用于生成一條魚。css 變量的值均為隨機(jī)生成，--size 的取值范圍是 5 ~ 8，--color 的取值范圍是 -60 ~ 15，--duration 的取值范圍是 3 ~ 6，--top 的取值范圍是 100 ~ 300：function buildFish() {
let fish = 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');
}
綁定鼠標(biāo)單擊事件，當(dāng)按下鼠標(biāo)時(shí)就生成一條魚：function buildFish(e) {
//略....
.style('--top', e.clientY);
}
window.addEventListener('click', buildFish);
并且讓魚的嘴部和點(diǎn)擊的位置在一條水平線上：.fish {
top: calc(var(--top) * 1px - var(--r));
}
最后，在頁面載入時(shí)自動(dòng)生成 3 條魚，以免頁面載入后一片空白：function buildFish(e) {
//略....
.style('--top', e ? e.clientY : d3.randomUniform(100, 300)());
}
d3.range(3).forEach(buildFish);
大功告成！
相關(guān)推薦：
總結(jié)
以上是生活随笔為你收集整理的用HTML和CSS3做个鱼,如何使用CSS和D3实现小鱼游动的交互动画（附代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 修改SrollView嵌套下的整个lay
- 下一篇： 2017年html5行业报告,云适配发布