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

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:black;

}

定义容器尺寸：

.love{

width:450px;

height:450px;

}

设置文本样式：

.love{

position:relative;

}

.lovespan{

position:absolute;

left:0;

color:goldenrod;

font-size:20px;

font-family:sans-serif;

text-shadow:001emwhite;

}

定义文本左右往复移动的动画：

.lovespan{

animation:x-move10sease-in-outinfinitealternate;

}

@keyframesx-move{

to{

left:450px;

}

}

定义子元素的下标变量，设置动画延时，使各单词依次入场：

.love{

--particles:3;

}

.lovespan{

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

}

.lovespan:nth-child(1){

--n:1;

}

.lovespan:nth-child(2){

--n:2;

}

.lovespan:nth-child(3){

--n:3;

}

增加文本沿心形运动的动画效果：

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

}

接下来用d3批量处理dom元素和css变量。

引入d3库：

声明一个数组，包含若干单词：

constwords=['aaa','bbb','ccc'];

用d3创建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文件中相关的dom元素和css文件中相关的css变量。

把数组元素改为“爱”在各种语言的单词：

constwords=[

'愛','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ìnhyêu','ליבע'];

最后，为第1个单词设置特殊的文字样式：

.lovespan:first-child{

color:orangered;

font-size:3em;

text-shadow:

000.1emblack,

001emwhite;

z-index:1;

}

以上是“CSS和D3怎么实现用文字组成的心形动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！