CSS+HTML<svg边框效果>

效果图：

20200422.gif

知识点：

1. stroke-dasharray 用于创建虚线，之所以后面跟的是array的，是因为值其实是数组。请看下面解释

🎈参数为1个时（虚线长）,虚线长为 100px

stroke-dasharray: 100;

image.png

🎈参数为2个时（虚线长，间距）,虚线长为 100px , 间距为 20px

stroke-dasharray: 100 20;

image.png

🎈参数为3个时（虚线长，虚线长，虚线长）,虚线长为 100px , 虚线长为 20px, 虚线长为 5px

stroke-dasharray: 100 20 5;

image.png

2. stroke-dashoffset 这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
可通过 stroke-dashoffset 的正负决定偏移方向
stroke-dashoffset: 0;

stroke-dasharray: 100 1100;
stroke-dashoffset: 0;

image.png

stroke-dashoffset: -600;

stroke-dasharray: 100 1100;
stroke-dashoffset: -600;

image.png

🎈还不理解的话，也可以参考这篇文章

代码如下：

<!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>
        .overall {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
        }

        svg {
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }

        .text {
            width: 300px;
            height: 300px;
            position: relative;
            z-index: 5;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
        }

        rect#shape {
            /* fill: red; */
            stroke: white;
            stroke-width: 5px;
            /* stroke-dasharray:用于创建虚线，之所以后面跟的是array的，是因为值其实是数组 */
            /* 虚线长 */
            /* 虚线长 间距  */
            /* 虚线长 虚线长 虚线长 */
            animation: dong 1s linear infinite;
        }

        @keyframes dong {
            0% {
                stroke-dasharray: 100 1100;
                stroke-dashoffset: 0;
            }

            50% {
                stroke-dasharray: 400 800;
                stroke-dashoffset: -600;
                /* stroke-opacity: 0.3; */
            }

            100% {
                stroke-dasharray: 100 1100;
                stroke-dashoffset: -1200;
            }
        }
    </style>
</head>

<body>
    <div class="overall">
        <div class="text">
            <span>SVG</span>
            <svg height="300" width="300">
                <rect id="shape" height="100%" width="100%" />
            </svg>
        </div>
    </div>
</body>

</html>

CSS+HTML<svg边框效果>

效果图：

知识点：

代码如下：

推荐阅读更多精彩内容