摘要：引入庫聲明一個(gè)數(shù)組，包含若干單詞用創(chuàng)建元素用為變量賦值刪除文件中相關(guān)的元素和文件中相關(guān)的變量。把數(shù)組元素改為愛在各種語言的單詞愛最后，為第個(gè)單詞設(shè)置特殊的文字樣式大功告成

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

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

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

請(qǐng)用 chrome, safari, edge 打開觀看。

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

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

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

定義 dom，容器中包含 3 個(gè)子元素，每個(gè)子元素中有一個(gè)單詞：

    aaa
    bbb
    ccc

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸：

.love {
    width: 450px;
    height: 450px;
}

設(shè)置文本樣式：

.love {
    position: relative;
}

.love span {
    position: absolute;
    left: 0;
    color: goldenrod;
    font-size: 20px;
    font-family: sans-serif;
    text-shadow: 0 0 1em white;
}

定義文本左右往復(fù)移動(dòng)的動(dòng)畫：

.love span {
    animation: x-move 10s ease-in-out infinite alternate;
}

@keyframes x-move {
    to {
        left: 450px;
    }
}

定義子元素的下標(biāo)變量，設(shè)置動(dòng)畫延時(shí)，使各單詞依次入場(chǎng)：

.love {
    --particles: 3;
}

.love span {
    animation-delay: calc(20s / var(--particles) * var(--n) * -1);
}

.love span:nth-child(1) {
    --n: 1;
}

.love span:nth-child(2) {
    --n: 2;
}

.love span:nth-child(3) {
    --n: 3;
}

增加文本沿心形運(yùn)動(dòng)的動(dòng)畫效果：

.love span {
    animation: 
        x-move 10s ease-in-out infinite alternate,
        y-move 20s linear infinite;
}

@keyframes y-move {
    0% { transform: translateY(180px); }
    10% { transform: translateY(45px); }
    15% { transform: translateY(5px); }
    18% { transform: translateY(0); }
    20% { transform: translateY(5px); }
    22% { transform: translateY(35px); }
    24% { transform: translateY(65px); }
    25% { transform: translateY(110px); }
    26% { transform: translateY(65px); }
    28% { transform: translateY(35px); }
    30% { transform: translateY(5px); }
    32% { transform: translateY(0); }
    35% { transform: translateY(5px); }
    40% { transform: translateY(45px); }
    50% { transform: translateY(180px); }
    71% { transform: translateY(430px); }
    72.5% { transform: translateY(440px); }
    75% { transform: translateY(450px); }
    77.5% { transform: translateY(440px); }
    79% { transform: translateY(430px); }
    100% { transform: translateY(180px); }
}

接下來用 d3 批量處理 dom 元素和 css 變量。
引入 d3 庫：

聲明一個(gè)數(shù)組，包含若干單詞：

const words = ["aaa", "bbb", "ccc"];

用 d3 創(chuàng)建 dom 元素：

d3.select(".love")
    .selectAll("span")
    .data(words)
    .enter()
    .append("span")
    .text((d) => d);

用 d3 為 css 變量賦值：

d3.select(".love")
    .style("--particles", words.length)
    .selectAll("span")
    .data(words)
    .enter()
    .append("span")
    .style("--n", (d, i) => i + 1)
    .text((d) => d);

刪除 html 文件中相關(guān)的 dom 元素和 css 文件中相關(guān)的 css 變量。

把數(shù)組元素改為“愛”在各種語言的單詞：

const words = [
    "愛", "Love", "Amour", "Liebe", "Amore",
    "Amor", "Любовь", "????", "?????", "Cinta",
    "Αγ?πη", "??", "Liefde", "Dashuri", "Каханне",
    "Ljubav", "Láska", "Armastus", "Mahal", "????", 
    "Szerelem", "Grá", "Mīlestība", "Meil?", "Любов", 
    "?убовта", "Cinta", "???", "Dragoste", "Láska", 
    "Renmen", "???", "muna?a", "Sevgi", "?убав", 
    "karout", "amà", "am?r", "k?rleiki", "mborayhu", 
    "Upendo", "sòòyayyàà", "ljubav", "???", "с?ю", 
    "с?й??", "tia", "aroha", "KHAIR", "?????", 
    "kj?rlighet", "munay", "jecel", "K?rlek", "soymek", 
    "Mahal", "ярату", "????", "sopp", "uthando", 
    "???????", "A?k", "Tình yêu", "????"];

最后，為第 1 個(gè)單詞設(shè)置特殊的文字樣式：

.love span:first-child {
    color: orangered;
    font-size: 3em;
    text-shadow: 
        0 0 0.1em black,
        0 0 1em white;
    z-index: 1;
}

大功告成！