How to use CSS and D3 to implement heart-shaped animation effects

Xiaobian to share with how to use CSS and D3 to implement the heart shaped animation effect of text, I believe that most people don’t know much, so share this article to everyone, I hope everyone is reading this article. There is a big gain after the article, let us let us know together!

怎么使用CSS和D3实现用文字组成的心形动画效果 Source code download

https: // github. COM / COMEHOPE / Front-End-Daily-Challenges

Define the DOM, contains 3 sub-elements in the container, and there is a word in each child element:

AAA

BBB
  CCC 
Creation:
body {margin: 0; Height: 100 VH; Display: flex; align-item; background-color: black;}

Define container size:

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

Setting text style:

.love {position: relative;}. Love span {position: absolute; left: {POSITION: ABSOLUTE; Left: 0;Color: Goldenrod; font-size: 20px; font-family: Sans-Serif; Text-Shadow: 0 0 1em White;}
   
Declining the movie of the left and right reciprocating movement:

.love span {animation: x-move 10s ease-in-out infinite alternate;} @ Keyframes X-Move {to {Left: 450px;}}
   The subscript variable of the child element is set, and the movie delay is set, so that all words will be admitted to the field: 

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

  Add text along the heart shaped movement Animation effect:  
.love span {animation: x-move 10s ease-in-out infinite alternate, y-move 20s linear infinite;} @ Keyframes Y-Move {0% {TRANSFORM: TRANSLORM: 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);}}

The DOM element and the CSS variable are processed by batch.
   

declares an array, including several words:
   
Const Words = [‘AAA’, ‘BBB’, ‘CCC’];


Create a DOM element with D3:
   D3.Select ('. Love') .Selectall ('span') .data (word) .Enter () .append ('span') .Text ((d) => d);   
Use D3 to assign a value of CSS variable:

D3.SELECT (‘. Love’) .style (‘- particles’, words.length) .Selectall (‘span’) .data (Words) .Enter () .append (‘span’) .Style (‘- n’, (d, i) => i + 1) .Text ((D) = > d);
  Deletes the associated DOM element in the HTML file and the CSS variable in the CSS file.  
Change the array element to “love” words in various languages:

Const Words = [‘Love’, ‘Love’,’Amour’, ‘Liebe’, ‘Amore’, ‘Amor’, ‘юююовь’, ‘اححح’, ‘प्यार’, ‘CINTA’, ‘αγάπη’, ‘사랑’, ‘Liefde’, ‘Dashuri’, ‘каханне ‘,’ Ljubav ‘,’ Armastus’, ‘Mahal’, ‘אהבה’, ‘szelelec’, ‘Grá’, ‘mīlesība’, ‘meilė’, ‘юююов’, ‘љубовта’, ‘Cinta’, ‘شقشق’, ‘Dragoste’, ‘Láska’, ‘Renmen’, ‘ፍቅር’, ‘Munaña’, ‘Sevgi’, ‘љубав’, ‘Karout’, ‘Amà’, ‘AmR’, ‘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, special text style is set for the first word:  

.love span: first-child {color: orangered; Font-size: 3em; Text-Shadow: 0 00.1em Black, 0 1em White; Z-Index: 1;}

How to use CSS and D3 to implement all content of the heart shaped animation effect of text, thank you Read! I believe everyone has a certain understanding, I hope to share the content of everyone, if you want to learn more knowledge, please pay attention to Tumi Yun Industry News Channel!
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment