源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

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

 

　　'Αγάπη','사랑','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;

 

　　}




本文转载自中文网