CSS和D3怎么實現用文字組成的心形動畫效果

小編給大家分享一下CSS和D3怎么實現用文字組成的心形動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

　　定義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;

　　}

以上是“CSS和D3怎么實現用文字組成的心形動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！