Shulou(Shulou.com)06/01 Report--

Editor to share with you how CSS and D3 to achieve the text composition of the heart-shaped animation effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Code interpretation

Define dom. The container contains 3 child elements, each with a word:

Aaa

Bbb

Ccc

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.love {

Width:450px

Height:450px

}

Set the text style:

.love {

Position:relative

}

.lovespan {

Position:absolute

Left:0

Color:goldenrod

Font-size:20px

Font-family:sans-serif

Text-shadow:001emwhite

}

Define the animation in which the text moves back and forth from side to side:

.lovespan {

Animation:x-move10sease-in-outinfinitealternate

}

@ keyframesx-move {

To {

Left:450px

}

}

Define the subscript variable of the child element, set the animation delay, and make each word enter the field in turn:

.love {

-- particles:3

}

.lovespan {

Animation-delay:calc (20s/var (--particles) * var (--n) *-1)

}

.lovespan:nth-child (1) {

-- nRO 1

}

.lovespan:nth-child (2) {

-- nRO 2

}

.lovespan:nth-child (3) {

-- nRO 3

}

Increase the animation effect of text moving along the heart:

.lovespan {

Animation:

X-move10sease-in-outinfinitealternate

Y-move20slinearinfinite

}

@ keyframesy-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:

Declare an array containing several words:

Constwords= ['aaa','bbb','ccc']

Create the dom element with d3:

D3.select ('.love')

.selectAll ('span')

.data (words)

.enter ()

.append ('span')

.text ((d) = > d)

Assign values to the css variable with d3:

D3.select ('.love')

.style ('--particles',words.length)

.selectAll ('span')

.data (words)

.enter ()

.append ('span')

.style ('--nasty, (dcentine I) = > iTun1)

.text ((d) = > d)

Delete the related dom elements in the html file and the related css variables in the css file.

Change the array element to the word "love" in various languages:

Constwords= [

"Love", "Love','Amour','Liebe','Amore'"

'There 's a lot of trouble with Amor',', I'm sorry, 'Cinta'.

"I don't know," he said. "Liefde','Dashuri',', I don't know.

'Ljubav',' L á ska', 'Armastus','Mahal',' girls'

"Szerelem',' Gra á", "Machilestadba", "Meil bread", "thanks to others"

'We don't know what to do,'we don't know,'we don't know.'we don't know what to do.'we don't know what to do.'we don't know

'Mia ñ a', 'Renmen',' ñ a', 'Muna ñ a',''Sevgil',''I'm sorry,''

'karout',' am à','am ô r è re de la'K æ rleiki','mborayhu''

'The Upendo',' sacks yayy others à', 'ljubav',' girls after all', 'girls after all'

'We don't know what to do,'we don't know,'we don't know.'we don't know.'we don't know.'

'Kjæ rlighet','munay','jecel',' K ä rlek','soymek'

'There 's a lot of money in Mahal',', and there's something wrong with it. 'sopp','uthando'

'There 's nothing wrong with that.'

Finally, set a special text style for the first word:

. lovespan:first-child {

Color:orangered

Font-size:3em

Text-shadow:

000.1emblack

001emwhite

Z-index:1

}

The above is all the content of the article "how to realize the heart-shaped animation effect composed of text by CSS and D3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.