怎么使用CSS和D3實現(xiàn)用文字組成的心形動畫效果

小編給大家分享一下怎么使用CSS和D3實現(xiàn)用文字組成的心形動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

武勝ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

效果預(yù)覽

怎么使用CSS和D3實現(xiàn)用文字組成的心形動畫效果

源代碼下載

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

代碼解讀

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

<div class="love">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
</div>

居中顯示：

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ù)移動的動畫：

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

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

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

.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;
}

增加文本沿心形運動的動畫效果：

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

<script src="https://d3js.org/d3.v5.min.js"></script>

聲明一個數(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 個單詞設(shè)置特殊的文字樣式：

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

以上是怎么使用CSS和D3實現(xiàn)用文字組成的心形動畫效果的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：怎么使用CSS和D3實現(xiàn)用文字組成的心形動畫效果
網(wǎng)站地址：http://bm7419.com/article2/jdgiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、云服務(wù)器、面包屑導(dǎo)航、網(wǎng)站排名、微信小程序、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)