论坛 › 马黑黑教程专版 › svg文本描边动画彩色版

马黑黑 发表于 2024-9-26 08:29

svg文本描边动画彩色版

本帖最后由 马黑黑 于 2024-9-26 13:59 编辑 <br /><br /><h2>代码：</h2>
<div class="hE"><pre id="codebox">
&lt;style&gt;
.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; }
}
&lt;/style&gt;

&lt;svg width="800" height="300" viewBox="0 0 800 300" class="svg"&gt;
        &lt;symbol id="hc"&gt;
                &lt;text text-anchor="middle" x="50%" y="50%" dy="60px"&gt;花潮论坛&lt;/text&gt;
        &lt;/symbol&gt;
        &lt;use href="#hc" class="text"&gt;&lt;/use&gt;
        &lt;use href="#hc" class="text"&gt;&lt;/use&gt;
        &lt;use href="#hc" class="text"&gt;&lt;/use&gt;
&lt;/svg&gt;
</pre></div>
<h2>效果：</h2>
<div id="resbox" style="text-align: center; transform: translateX(-40px);"></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
resbox.innerHTML = codebox.innerText;
</script>

起个网名好难 发表于 2024-9-26 09:25

学习一个{:5_106:}
<style>
.svgShow {
    border: 1px solid gray;
    background: linear-gradient(45deg, tan, transparent, teal);
}

.txt {
    font: bold 160px monospace;
    fill: none;
    stroke-width: 6;
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 6px #333);
}

.txt:nth-child(7n + 1) {
    stroke: red;
    animation: sColor1 10s infinite alternate;
}

.txt:nth-child(7n + 2) {
    stroke: orange;
    animation: sColor2 10s infinite alternate;
}

.txt:nth-child(7n + 3) {
    stroke: yellow;
    animation: sColor3 10s infinite alternate;
}

.txt:nth-child(7n + 4) {
    stroke: green;
    animation: sColor4 10s infinite alternate;
}

.txt:nth-child(7n + 5) {
    stroke: cyan;
    animation: sColor5 10s infinite alternate;
}

.txt:nth-child(7n + 6) {
    stroke: blue;
    animation: sColor6 10s infinite alternate;
}

.txt:nth-child(7n + 7) {
    stroke: purple;
    animation: sColor7 10s infinite alternate;
}

@keyframes sColor1 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1000;
    }
}

@keyframes sColor2 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1040;
    }
}

@keyframes sColor3 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1080;
    }
}

@keyframes sColor4 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1120;
    }
}

@keyframes sColor5 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1160;
    }
}

@keyframes sColor6 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1200;
    }
}

@keyframes sColor7 {
    to {
      stroke-dasharray: 40 200;
      stroke-dashoffset: 1240;
    }
}
</style>
<svg width="800" height="300" viewBox="0 0 800 300" class="svg">
<symbol id="yhll">
    <text text-anchor="middle" x="50%" y="50%" dy="60px">眼花缭乱</text>
</symbol>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
<use href="#yhll" class="txt"></use>
</svg>

梦江南 发表于 2024-9-26 10:07

这个好玩！{:4_187:}

世外桃源 发表于 2024-9-26 12:52

本帖最后由 马黑黑 于 2024-9-26 13:57 编辑 <br /><br />我也是学习一个

<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="hc1">
                <text text-anchor="middle" x="50%" y="50%" dy="60px">老昏眼花</text>
        </symbol>
        <use href="#hc1" class="text"></use>
        <use href="#hc1" class="text"></use>
        <use href="#hc1" class="text"></use>
</svg>

世外桃源 发表于 2024-9-26 12:57

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

马黑黑 发表于 2024-9-26 13:58

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

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

红影 发表于 2024-9-26 20:18

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

红影 发表于 2024-9-26 20:23

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

马黑黑 发表于 2024-9-26 20:27

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

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

马黑黑 发表于 2024-9-26 20:28

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

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

醉美水芙蓉 发表于 2024-9-26 20:32

红影 发表于 2024-9-26 20:32

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

红影 发表于 2024-9-26 20:32

彩色描边，太神奇了{:4_187:}

翁奕童苑 发表于 2024-9-26 21:10

<p></p>

<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 22:53

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

马黑黑 发表于 2024-9-26 22:57

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

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

马黑黑 发表于 2024-9-26 22:57

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

多个class

马黑黑 发表于 2024-9-26 22:57

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

{:4_190:}

红影 发表于 2024-9-26 22:59

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

原来还有玉质质感的效果啊，这个真不错{:4_187:}

红影 发表于 2024-9-26 23:00

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

这个以前没用过，还好这里看到了{:4_173:}

查看完整版本: svg文本描边动画彩色版