摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。引入庫刪除掉中的元素和文件中的變量聲明代碼。創建一個函數，用于生成一條魚。

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/bxwpER

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cWJmLh6

每日前端實戰系列的全部源代碼請從 github 下載：

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

定義 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) 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));
}

增加讓魚游動的動畫效果，不是循環執行，而是只執行一次：

.fish {
    right: calc(var(--r) * -1);
    animation: run 3s linear forwards;
}

@keyframes run {
    to {
        right: 100%;
    }
}

再增加魚游動時搖擺的動畫效果：

.fish {
    animation: 
        run 3s linear forwards,
        shake 0.3s linear infinite;
}

@keyframes shake {
    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: 
        run calc(var(--duration) * 1s) linear forwards,
        shake 0.3s linear infinite;
}

魚出現的高度，數據越大越靠近頁面下部：

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

function buildFish() {
    let fish = d3.select("body")
        .append("div")
        .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");
}

綁定鼠標單擊事件，當按下鼠標時就生成一條魚：

function buildFish(e) {
    //略....
    .style("--top", e.clientY);
}

window.addEventListener("click", buildFish);

并且讓魚的嘴部和點擊的位置在一條水平線上：

.fish {
    top: calc(var(--top) * 1px - var(--r));
}

最后，在頁面載入時自動生成 3 條魚，以免頁面載入后一片空白：

function buildFish(e) {
    //略....
    .style("--top", e ? e.clientY : d3.randomUniform(100, 300)());
}

d3.range(3).forEach(buildFish);

大功告成！