CSS和D3怎么实现用文字组成的心形动画效果
小编给大家分享一下CSS和D3怎么实现用文字组成的心形动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
代码解读
定义dom，容器中包含3个子元素，每个子元素中有一个单词：
aaa
bbb
ccc
居中显示：
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怎么实现用文字组成的心形动画效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
