CSS和D3怎么实现用文字组成的心形动画效果(css,d3,web开发)

　　代码解读

　　定义dom，容器中包含3个子元素，每个子元素中有一个单词：

　　<divclass="love">

　　<span>aaa</span>

　　<span>bbb</span>

　　<span>ccc</span>

　　</div>

　　居中显示：

　　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库：

　　<scriptsrc="https://d3js.org/d3.v5.min.js"></script>

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

　　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',

　　'&Alpha;&gamma;ά&pi;&eta;','사랑','Liefde','Dashuri','Каханне',

　　'Ljubav','L&aacute;ska','Armastus','Mahal','אהבה',

　　'Szerelem','Gr&aacute;','Mīlestība','Meilė','Любов',

　　'Љубовта','Cinta','عشق','Dragoste','L&aacute;ska',

　　'Renmen','ፍቅር','muna&ntilde;a','Sevgi','Љубав',

　　'karout','am&agrave;','am&ocirc;r','k&aelig;rleiki','mborayhu',

　　'Upendo','s&ograve;&ograve;yayy&agrave;&agrave;','ljubav','Սեր','сүю',

　　'сүйүү','tia','aroha','KHAIR','प्रेम',

　　'kj&aelig;rlighet','munay','jecel','K&auml;rlek','soymek',

　　'Mahal','ярату','محبت','sopp','uthando',

　　'ความรัก','Aşk','T&igrave;nhy&ecirc;u','ליבע'];

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

　　.lovespan:first-child{

　　color:orangered;

　　font-size:3em;

　　text-shadow:

　　000.1emblack,

　　001emwhite;

　　z-index:1;

　　}