How to use CSS and D3 to implement a heart-shaped animation effect with text (with code)

This article brings you the content is about how to use CSS and D3 to achieve the text of the heart-shaped animation effect (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 3 child elements, one word in each child element:

<div class= "Love" >    <span>aaa</span>    <span>bbb</span>    <SPAN>CCC </span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:black;}

Define Container Dimensions:

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

To set the 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;}

To define the animation of text-to-reciprocating movement:

. Love span {    Animation:x-move 10s ease-in-out infinite Alternate;} @keyframes X-move {to    {        left:450px;    }}

Define the subscript variable for the child element, set the animation delay so that each word enters in order:

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

Animate the text along the heart-shaped motion:

. 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, the DOM elements and CSS variables are processed in bulk using D3.
Introducing the D3 Library:

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

Declares an array that contains several words:

Const WORDS = [' aaa ', ' BBB ', ' CCC '];

To create a DOM element with D3:

D3.select ('. Love ').    selectall (' span ').    data (words).    Enter ()    . Append (' span ')    . Text ((d) = D);

To assign a value to a CSS variable with d3:

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 associated DOM elements in the HTML file and the associated CSS variables in the CSS file.

Change the array elements to "love" words in various languages:

Const WORDS = [    ' Loves ', ' 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 ', ' Tinh yêu ', ' ליבע '];

Finally, set a special text style for the 1th Word:

. Love Span:first-child {    color:orangered;    Font-size:3em;    Text-shadow:         0 0 0.1em Black,        0 0 1em White;    Z-index:1;}