1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS实现动态文字效果

CSS实现动态文字效果

时间:2024-01-13 18:14:44

相关推荐

CSS实现动态文字效果

最终效果截图(静态):

HTML代码:

<svg viewBox="0 0 600 300"><symbol id="id"><text dy="1em">Lychee</text></symbol><use class="text" xlink:href="#id"></use><use class="text" xlink:href="#id"></use><use class="text" xlink:href="#id"></use><use class="text" xlink:href="#id"></use><use class="text" xlink:href="#id"></use></svg>

CSS代码:

.text {font: 5em/1 Arial Rounded MT Bold;text-transform: uppercase;fill: none;stroke-width: 3;stroke-linejoin: round;stroke-dasharray: 70 330;stroke-dashoffset: 0;animation: stroke 6s infinite;}.text:nth-child(5n + 1) {stroke: #9fa8da;animation-delay: -1.5s;}.text:nth-child(5n + 2) {stroke: #9fa8da;animation-delay: -3s;}.text:nth-child(5n + 3) {stroke: #7986cb;animation-delay: -4.5s;}.text:nth-child(5n + 4) {stroke: #5c6bc0;animation-delay: -6s;}.text:nth-child(5n + 5) {stroke: #3f51b5;animation-delay: -7.5s;}@keyframes stroke {100% {stroke-dashoffset: -400;}}

参考链接:

/yan_lychee/article/details/80222714

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。