怎么使用CSS和D3实现用文字组成的心形动画效果 - 行业资讯

　　介绍

小编给大家分享一下怎么使用CSS和D3实现用文字组成的心形动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<>强效果预览

<强>源代码下载

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

<强>代码解读

定义dom,容器中包含三个子元素,每个子元素中有一个单词:

& lt; div类=發ove"比; 　　& lt; span> aaa 　　& lt; span> bbb 　　& lt; span> ccc 　　& lt;/div>

居中显示:

身体{ 　　保证金:0; 　　身高:100 vh; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　背景颜色:黑色; 　　}

定义容器尺寸:

。爱{ 　　宽度:450 px; 　　身高:450 px; 　　}

设置文本样式:

。爱{ 　　位置:相对; 　　} 　　　　爱跨越了{ 　　位置:绝对的; 　　左:0; 　　颜色:秋麒麟草属植物; 　　字体大小:20 px; 　　字体类型:无衬线; 　　文本阴影:0 0 1 em白色; 　　}

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

。爱跨越了{ 　　动画:x-move 10年代ease-in-out无限备用; 　　} 　　　　@keyframes x-move { 　　, { 　　左:450 px; 　　} 　　}

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

。爱{ 　　——粒子:3; 　　} 　　　　爱跨越了{ 　　20年代animation-delay:钙(/var(粒子)* var (- n) * 1); 　　} 　　　　爱跨越:nth-child (1) { 　　——n: 1; 　　} 　　　　爱跨越:nth-child (2) { 　　——n: 2; 　　} 　　　　爱跨越:nth-child (3) { 　　——n: 3; 　　}

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

。爱跨越了{ 　　动画: 　　x-move 10年代ease-in-out无限的交替, 　　20年代y线性无限; 　　} 　　　　@keyframes y { 　　0%{变换:translateY (180 px);} 　　10%{变换:translateY (45 px);} 　　15%{变换:translateY (5 px);} 　　18%{变换:translateY (0);} 　　20%{变换:translateY (5 px);} 　　22%{变换:translateY (35 px);} 　　24%{变换:translateY (65 px);} 　　25%{变换:translateY (110 px);} 　　26%{变换:translateY (65 px);} 　　28%{变换:translateY (35 px);} 　　30%{变换:translateY (5 px);} 　　32%{变换:translateY (0);} 　　35%{变换:translateY (5 px);} 　　40%{变换:translateY (45 px);} 　　50%{变换:translateY (180 px);} 　　71%{变换:translateY (430 px);} 　　72.5%{变换:translateY (440 px);} 　　75%{变换:translateY (450 px);} 　　77.5%{变换:translateY (440 px);} 　　79%{变换:translateY (430 px);} 　　100%{变换:translateY (180 px);} 　　}

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

& lt;脚本https://www.yisu.com/zixun/src=" https://d3js.org/d3.v5.min.js ">

声明一个数组,包含若干单词:

const词=[& # 39;aaa # 39; & # 39; bbb # 39;, & # 39; ccc # 39;];

用d3创建dom元素:

d3.select(& # 39;爱# 39;) 　　.selectAll(& # 39;跨度# 39;) 　　. data(单词) 　　.enter () 　　.append(& # 39;跨度# 39;) 　　。text ((d)=比;d);

用d3为css变量赋值:

d3.select(& # 39;爱# 39;) 　　.style(& # 39;——粒子# 39;words.length) 　　.selectAll(& # 39;跨度# 39;) 　　. data(单词) 　　.enter () 　　.append(& # 39;跨度# 39;) 　　.style (& # 39;——n # 39; (d i)=比;我+ 1) 　　。text ((d)=比;d);

删除html文件中相关的dom元素和css文件中相关的css变量。

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

const词=[ 　　& # 39;愛& # 39;& # 39;爱# 39;& # 39;恋情# 39;,& # 39;爱# 39;& # 39;爱茉莉# 39; 　　& # 39;埃莫# 39;& # 39;Любовь& # 39;& # 39;? ? ? ? & # 39;& # 39;? ? ? ? ? & # 39;& # 39;Cinta& # 39; 　　& # 39;Αγ?πη& # 39;& # 39;? ? & # 39;& # 39;Liefde& # 39; & # 39; Dashuri& # 39;, & # 39;Каханне& # 39; 　　& # 39;Ljubav& # 39; & # 39;香鼠# 39;& # 39;Armastus& # 39; & # 39;宫殿# 39;,& # 39;? ? ? ? & # 39; 　　& # 39;Szerelem& # 39; & # 39;抓住# 39;& # 39;Mīlestība& # 39;, & # 39;梅尔? & # 39;& # 39;Любов& # 39; 　　& # 39;?убовта& # 39;& # 39;Cinta& # 39;, & # 39; ? ? ? & # 39; & # 39; Dragoste& # 39; & # 39;香鼠# 39; 　　& # 39;Renmen& # 39; & # 39; ? ? ? & # 39; & # 39;穆纳?一个# 39;& # 39;Sevgi& # 39; & # 39; ?убав& # 39; 　　& # 39;karout& # 39; & # 39; ama # 39; & # 39; ? " # 39;, & # 39; k ? rleiki& # 39; & # 39; mborayhu& # 39; 　　& # 39;Upendo& # 39; & # 39; sooyayyaa& # 39; & # 39; ljubav& # 39;, & # 39; ? ? ? & # 39; & # 39;с?ю& # 39; 　　& # 39;с?й? ? & # 39;& # 39;tia # 39; & # 39; aroha& # 39; & # 39;海# 39;,& # 39;? ? ? ? ? & # 39; 　　& # 39;kj ? rlighet& # 39; & # 39; munay& # 39; & # 39; jecel& # 39;, & # 39; K ? rlek& # 39; & # 39; soymek& # 39; 　　& # 39;宫殿# 39;& # 39;ярату& # 39;& # 39;? ? ? ? & # 39;& # 39;sopp& # 39; & # 39; uthando& # 39; 　　& # 39;? ? ? ? ? ? ? & # 39;& # 39;一个? k # 39; & # 39;见到》# 39;& # 39;? ? ? ? & # 39;];