让你的文字动起来!
2020-04-29 / CHINQ / / 2 min. read

看到了一个比较不错的字体画,把他复原了

HTML部分

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>会动的文字</title><link rel="stylesheet" href="style.css"></head><body><div class="container"><svg class="svg" viewBox="0 0 1000 300"><symbol id="line-text"><text text-anchor="middle" x="50%" y="50% dy=".4em">CHINQ</text></symbol><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use></svg></div></body></html>

CSS部分

*{padding:0;margin:0}body{background-color:#292d3e}.container{font-size:100px;font-weight:bold;text-transform:uppercase}.svg{position:absolute;width:100%;height:100%}.text{fill:none;stroke-width:5;stroke-dasharray:0 240;stroke-dashoffset:0}.text:nth-child(4n+1){stroke:#2787ee;animation:text1 4s ease-in-out forwards}.text:nth-child(4n+2){stroke:#2fc45c;animation:text2 4s ease-in-out forwards}.text:nth-child(4n+3){stroke:#f9bd38;animation:text3 4s ease-in-out forwards}.text:nth-child(4n+4){stroke:#eb3d32;animation:text4 4s ease-in-out forwards}@keyframes text1{100%{stroke-dashoffset:1000;stroke-dasharray:60 180}}@keyframes text2{100%{stroke-dashoffset:1060;stroke-dasharray:60 180}}@keyframes text3{100%{stroke-dashoffset:1120;stroke-dasharray:60 180}}@keyframes text4{100%{stroke-dashoffset:1180;stroke-dasharray:60 180}}

在CHINQ那个位置写入你想要的文字就好了

😀
本文链接:
https://www.cqbg.ga/2020/04/29/%E8%AE%A9%E4%BD%A0%E7%9A%84%E6%96%87%E5%AD%97%E5%8A%A8%E8%B5%B7%E6%9D%A5%EF%BC%81/