CSS+HTML

作者: 誰在花里胡哨 | 来源:发表于2020-04-22 16:11 被阅读0次

CSS+HTML
CSS+HTML
CSS+HTML
CSS+HTML<文字效果>
CSS+HTML<文字抖动效果>
CSS+HTML<文字排列效果>
CSS+HTML
使用svg 描边绘制动态文字
CSS 效果
canvas Seven 文字

效果图：

image.png

不太理解 css属性 stroke-dasharray，stroke-dashoffset 的，可参考这篇文章

知识点：

1. <symbol> 和 <use> 的配合使用
定义 id="s-text"，引入xlink:href="#s-text"，这样就可以针对 <text> 引入多重效果，以便于实现多个色彩边框的效果

<svg width="100%" height="100">
        <symbol id="s-text">
            <text text-anchor="middle" x="50%" y="70%">Text Border</text>
        </symbol>
        <use class="text_use t1" xlink:href="#s-text"></use>
        <use class="text_use t2" xlink:href="#s-text"></use>
        <use class="text_use t3" xlink:href="#s-text"></use>
    </svg>

🎈可以配合使用 animation，实现以下效果

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #f1f1f1;
        }

        svg {
            cursor: pointer;
        }

        svg:hover .text {
            fill: #d3d3d3;
        }

        .text {
            font-size: 60px;
            font-weight: bold;
            stroke-width: 2;
            fill: transparent;
            stroke: rgb(0, 0, 0);
            letter-spacing: 0.5rem;
            transition: 0.3s;
        }

        .text.t2 {
            /* stroke-linejoin 圆角 */
            stroke-linejoin: round;
            stroke-dasharray: 10;
        }

        .text.t3 {
            stroke-linejoin: round;
            stroke-dasharray: 10;
            stroke-dashoffset: 0;
            animation: dong3 3s linear infinite;
        }

        .text.t4 {
            stroke-dasharray: 10 400;
            animation: dong4 3s linear infinite;
        }

        @keyframes dong3 {
            100% {
                stroke-dashoffset: 400;
            }
        }

        @keyframes dong4 {
            100% {
                stroke-dasharray: 400 0;
            }
        }



        .text_use {
            font-size: 60px;
            font-weight: bold;
            stroke-width: 2;
            fill: transparent;
            letter-spacing: 0.5rem;
            stroke-dasharray: 30 30;
            animation: dong5 3s linear infinite;
        }

        .text_use.t1 {
            animation-delay: -1s;
            stroke: rgb(219, 56, 56);
        }

        .text_use.t2 {
            animation-delay: -0.2s;
            stroke: rgb(65, 209, 149);
        }

        .text_use.t3 {
            animation-delay: -0.1s;
            stroke: rgb(127, 52, 224);
        }

        @keyframes dong5 {
            100% {
                stroke-dashoffset: -300;
            }
        }
    </style>
</head>

<body>
    <svg width="100%" height="100" style="margin-top:5%">
        <text class="text" text-anchor="middle" x="50%" y="70%">Text Border</text>
    </svg>
    <svg width="100%" height="100">
        <text class="text t2" text-anchor="middle" x="50%" y="70%">Text Border</text>
    </svg>
    <svg width="100%" height="100">
        <text class="text t3" text-anchor="middle" x="50%" y="70%">Text Border</text>
    </svg>
    <svg width="100%" height="100">
        <text class="text t4" text-anchor="middle" x="50%" y="70%">Text Border</text>
    </svg>
    <svg width="100%" height="100">
        <symbol id="s-text">
            <text text-anchor="middle" x="50%" y="70%">Text Border</text>
        </symbol>
        <use class="text_use t1" xlink:href="#s-text"></use>
        <use class="text_use t2" xlink:href="#s-text"></use>
        <use class="text_use t3" xlink:href="#s-text"></use>
    </svg>
</body>

</html>