正文

svg边框动画

譬如朝露 V管理员/ / 0 评论/ 830阅读
07 26 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background-color:#333;">
        <svg width="400" height="400">
            <defs>
                <radialGradient id="linear-color" cx="50%" cy="50%" fx="100%" fy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" />

                    <stop offset="100%" stop-color="#fff" stop-opacity='0' />
                </radialGradient>
                <path id="fly-path" d="M5,5 L395 5,L395 395,L5,395,Z" fill="none"></path>
                <mask id="fly-box-mask">
                    <circle cx="0" cy="0" r="50" fill="url(#linear-color)">
                        <animateMotion path="M5,5 L395 5,L395 395,L5,395 Z" dur="5" rotate="auto"
                            repeatCount="indefinite">
                        </animateMotion>
                    </circle>

                </mask>

            </defs>
            <use href="#fly-path" stroke="#235fa7" stroke-width="1"></use>

            <use href="#fly-path" stroke="#4fd2dd" stroke-width="3" mask="url(#fly-box-mask)"></use>
            <!-- <circle cx="0" cy="0" r="50" fill="url(#linear-color)">
                <animateMotion path="M5,5 L395 5,L395 395,L5,395 Z" dur="5" rotate="auto" repeatCount="indefinite">
                </animateMotion>
            </circle> -->
        </svg>
    </div>

</body>

</html>

svg边框动画

文章版权声明：除非注明，否则均为 譬如朝露博客原创文章，转载或复制请以超链接形式并注明出处。