Home >Web Front-end >CSS Tutorial >How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code)
The content of this article is about how to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code). It has certain reference value. Friends in need can refer to it. Hope it helps.
Effect preview
Source code download
https:/ /github.com/comehope/front-end-daily-challenges
Code Interpretation
Define dom, the container contains 3 sub-elements, one in each sub-element Word:
<div> <span>aaa</span> <span>bbb</span> <span>ccc</span> </div>
Centered display:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
Define container size:
.love { width: 450px; height: 450px; }
Set text style:
.love { position: relative; } .love span { position: absolute; left: 0; color: goldenrod; font-size: 20px; font-family: sans-serif; text-shadow: 0 0 1em white; }
Define the animation of text moving left and right:
.love span { animation: x-move 10s ease-in-out infinite alternate; } @keyframes x-move { to { left: 450px; } }
Define the subscript variable of the sub-element and set the animation delay so that each word enters in sequence:
.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; }
Increase the animation effect of text moving along the heart shape:
.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); } }
Next, use d3 to batch process dom elements and css variables.
Introduce the d3 library:
<script></script>
Declare an array containing several words:
const words = ['aaa', 'bbb', 'ccc'];
Use d3 to create dom elements:
d3.select('.love') .selectAll('span') .data(words) .enter() .append('span') .text((d) => d);
Use d3 to assign values to css variables:
d3.select('.love') .style('--particles', words.length) .selectAll('span') .data(words) .enter() .append('span') .style('--n', (d, i) => i + 1) .text((d) => d);
Delete the relevant dom elements in the html file and the relevant css variables in the css file.
Change the array elements to the word "love" in various languages:
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', 'ליבע'];
Finally, set a special text style for the first word:
.love span:first-child { color: orangered; font-size: 3em; text-shadow: 0 0 0.1em black, 0 0 1em white; z-index: 1; }
Related recommendations :
How to use CSS and D3 to achieve a black and white overlapping animation effect
How to use pure CSS to achieve an animation effect without DOM elements
How to use pure CSS to achieve a moving white rabbit animation effect
The above is the detailed content of How to use CSS and D3 to achieve a heart-shaped animation effect composed of text (with code). For more information, please follow other related articles on the PHP Chinese website!