svg文本描边动画彩色版

马黑黑

代码：

<style>
.svg {
	border: 1px solid gray;
	background: linear-gradient(45deg, tan, transparent, teal);
}
.text {
	font: bold 160px monospace;
	fill: none;
	stroke-width: 6;
	stroke-dasharray: 0 300;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 6px #333);
}
.text:nth-child(3n + 1) {
	stroke: red;
 	animation: stroke1 10s infinite alternate;  
}
.text:nth-child(3n + 2) {
	stroke: green;
	animation: stroke2 10s infinite alternate;
}
.text:nth-child(3n + 3) {
	stroke: blue;
	animation: stroke3 10s infinite alternate;
}
@keyframes stroke1 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1000; }
}
@keyframes stroke2 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1080; }
}
@keyframes stroke3 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1160; }
}
</style>

<svg width="800" height="300" viewBox="0 0 800 300" class="svg">
	<symbol id="hc">
		<text text-anchor="middle" x="50%" y="50%" dy="60px">花潮论坛</text>
	</symbol>
	<use href="#hc" class="text"></use>
	<use href="#hc" class="text"></use>
	<use href="#hc" class="text"></use>
</svg>

效果：

起个网名好难

学习一个

梦江南

这个好玩！

世外桃源

我也是学习一个

世外桃源

改了四个字还是出来花潮论坛

马黑黑

世外桃源 发表于 2024-9-26 12:57
改了四个字还是出来花潮论坛

symbol 的 id 改一下，use 的 href 跟着改。已经帮你改好，看一下代码

红影

这个还是用css设计的呢。因为用了3个颜色做间隔，所以用了nth-child(3n + 1)的伪类选择器么？
这个制作真有趣，漂亮

红影

font: bold 160px monospace; 最后的这个等宽体平时也不太常见

马黑黑

红影 发表于 2024-9-26 20:18
这个还是用css设计的呢。因为用了3个颜色做间隔，所以用了nth-child(3n + 1)的伪类选择器么？
这个制作真 ...

如果文字笔画的内部空间较宽，里面的玉质质感会呈现出来。这和系统的默认等宽字体有关，因为我没有设置具体的字体，只是大致的等宽字库

马黑黑

红影 发表于 2024-9-26 20:23
font: bold 160px monospace; 最后的这个等宽体平时也不太常见

等宽字是很好看的。写代码的一般都会设置编辑器的字体为等宽字，便于比较

红影

<text text-anchor="middle" x="50%" y="50%" dy="60px">
这里的dy是起什么作用的？

红影

彩色描边，太神奇了

翁奕童苑

花飞飞

电影里的特效一般。。好看。。
能改自己想要的字，好玩。。

马黑黑

红影 发表于 2024-9-26 20:32
这里的dy是起什么作用的？

dy和dx通常都是值y、x偏移量

马黑黑

红影 发表于 2024-9-26 20:32
彩色描边，太神奇了

多个class

马黑黑

花飞飞 发表于 2024-9-26 22:53
电影里的特效一般。。好看。。
能改自己想要的字，好玩。。

红影

马黑黑 发表于 2024-9-26 20:27
如果文字笔画的内部空间较宽，里面的玉质质感会呈现出来。这和系统的默认等宽字体有关，因为我没有设置具 ...

原来还有玉质质感的效果啊，这个真不错

红影

马黑黑 发表于 2024-9-26 20:28
等宽字是很好看的。写代码的一般都会设置编辑器的字体为等宽字，便于比较

这个以前没用过，还好这里看到了