文字描边效果

简单描边

<h1>文字</h1>
<style>
    h1 {
        font-size: 10em;
        text-align: center;
        -webkit-text-fill-color: deepskyblue;
        -webkit-text-stroke: 3px red;
    }
</style>

效果图

渐变描边

主要是用到背景渐变的样式。

<h1>文字</h1>
<style>
    h1 {
        text-align: center;
        font-size: 10em;
        background: linear-gradient(0deg, #ff2e2b 20%, #de55ec 46%, #09E5C3 91%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: #fff;
        -webkit-text-stroke: 6px transparent;
    }
</style>

效果图

SVG多彩描边效果

<svg viewBox="0 0 1320 300">
    <!-- Symbol -->
    <symbol id="s-text">
        <text text-anchor="middle"
              x="50%" y="50%" dy=".35em">
            文字
        </text>
    </symbol>
    <!-- Duplicate symbols -->
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
</svg>
<style>
    body {
        background: #212121;
    }
    text{
        font-size: 10em;
    }
    .text {
        fill: none;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-dasharray: 25 75;
        stroke: #25f229;
        stroke-dashoffset: 0;
    }

    .text:nth-child(4n + 1) {
        stroke: #F2385A;
        stroke-dashoffset: 25;
        stroke-dasharray: 25 75;
    }

    .text:nth-child(4n + 2) {
        stroke: #F5A503;
        stroke-dashoffset: 50;
        stroke-dasharray: 25 75;
    }

    .text:nth-child(4n + 3) {
        stroke: #E9F1DF;
        stroke-dashoffset: 75;
        stroke-dasharray: 25 75;
    }
</style>

效果图

SVG动画霓虹灯效果

<svg viewBox="0 0 1320 300">
    <!-- Symbol -->
    <symbol id="s-text">
        <text text-anchor="middle"
              x="50%" y="50%" dy=".35em">
            文字
        </text>
    </symbol>
    <!-- Duplicate symbols -->
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
    <use xlink:href="#s-text" class="text"></use>
</svg>
<style>
    body {
        background: #212121;
    }
    text{
        font-size: 10em;
    }
.text {
        fill: none;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-dasharray: 40 360;
        stroke-dashoffset: 0;
        animation: stroke 7s infinite linear;
    }

    .text:nth-child(7n + 1) {
        stroke: #F2385A;
        animation-delay: -1s;
    }

    .text:nth-child(7n + 2) {
        stroke: #F5A503;
        animation-delay: -2s;
    }

    .text:nth-child(7n + 3) {
        stroke: #E9F1DF;
        animation-delay: -3s;
    }

    .text:nth-child(7n + 4) {
        stroke: #56D9CD;
        animation-delay: -4s;
    }

    .text:nth-child(7n + 5) {
        stroke: #3AA1BF;
        animation-delay: -5s;
    }

    .text:nth-child(7n + 6) {
        stroke: #8a54bf;
        animation-delay: -6s;
    }

    .text:nth-child(7n + 7) {
        stroke: #1fbf4c;
        animation-delay: -7s;
    }
  @keyframes stroke {
        100% {
            stroke-dashoffset: -400;
        }
    }
</style>

效果图