前端日常实践：109#视频演示如何使用CSS和D3制作由文字组成的心形图案
时间：2023-03-30 17:28:52
CSS
效果预览在当前页面点击右侧的“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/xJvERW互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cm94eu6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含3个子元素，每个子元素有一个词：aaabbbccc
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.love{width:450px;height:450px;}设置文字样式:.love{position:relative;}.lovespan{position:absolute;左：0；颜色：金黄色；字体大小：20px；字体系列：无衬线；text-shadow:001emwhite;}定义文字左右往复的动画:.lovespan{animation:x-move10sease-in-outinfinitealternate;}@keyframesx-move{to{left:450px;}}definer元素的下标变量，设置动画延迟，让每个单词依次进入场景：.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%{转换：translateY(45px);}15%{转换：translateY(5px);}18%{转换：translateY(0);}20%{转换：translateY(5px);}22%{转换：translateY(35px);}24%{转换：translateY(65px);}25%{转换：translateY(110px);}26%{转换：translateY(65px);}28%{转换：translateY(35px);}30%{转换：translateY(5px);}32%{转换：translateY(0);}35%{转换：translateY(5px);}40%{转换：translateY(45px);}50%{转换：translateY(180px);}71%{转换：translateY(430px);}72.5%{转换：translateY(440px);}75%{转换：translateY(450px);}77.声明一个包含多个单词的数组：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','Love','????','Pyār','Cinta','Αγ?πη','??','Liefde','Dashuri','Kahanne','Ljubav','Láska','Armastus','Mahal','Ahaba',爱','Grá','Mīlestība','Meil?','Love','Khubovta','Cinta','Love','Dragoste','Láska','Renmen','Love','muna?a'爱'love','tia','aroha','KHAIR','love','kj?rlighet','oil','jecel','K?rlek','peel','Mahal','love','love','sopp','uthando','love','Love','Tìnhyêu','libé'];最后，第1个英语设计的文字模型：.lovespan:first-child{color:orange;字体大小：3em；文本阴影：000.1em黑色，001em白色；z-index:1;}大功告成！
