您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用CSS和D3實(shí)現(xiàn)用文字組成的心形動(dòng)畫效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
效果預(yù)覽
源代碼下載
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義 dom,容器中包含 3 個(gè)子元素,每個(gè)子元素中有一個(gè)單詞:
<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ù)移動(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í),使各單詞依次入場:
.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 庫:
<script src="https://d3js.org/d3.v5.min.js"></script>
聲明一個(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; }
以上是怎么使用CSS和D3實(shí)現(xiàn)用文字組成的心形動(dòng)畫效果的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。