实现svg文本自动绘画功能

最新推荐文章于 2024-07-18 14:29:38 发布

墨·殇

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量143

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/freedms/article/details/132827479

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>love</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
         main{
             height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             background-color: rgb(30, 49, 71);
         }

        .txt{

            font-family: 楷体,serif;
            font-weight: 900;
            font-size: 80px;
            letter-spacing: 5px;
            fill: transparent;
            stroke: url("#yanse"); 
            stroke-width: 1.5px;
            stroke-dasharray: 800;
            stroke-dashoffset: 800;
            animation: draw 15s linear infinite;
        }
        
        @keyframes draw{
           0%,5%{
            stroke-dasharray: 800;
            stroke-dashoffset: 800;
            }
            40%,60%{
                stroke-dasharray: 800;
                 stroke-dashoffset: 0;
            }
            100%{
                stroke-dasharray: 800;
                 stroke-dashoffset: 800;
            }
        }
    </style>
</head>
 
<body>
    <main>
          <svg width="1100" height="200">
              <defs>
                 <linearGradient id="yanse">
                     <stop offset="33%" stop-color="#00BFFF">
                         <animate attributeName="stop-color"
                         from="#00BFFF" to="#FF8C00" dur="5s" repeatCount="indefinite"></animate>
                     </stop>
                     <stop offset="66%" stop-color="#00FFFF"></stop>
                     <stop offset="100%" stop-color="#00FA9A">
                        <animate attributeName="stop-color"
                        from="#00FA9AF" to="#FF00FF" dur="5s" repeatCount="indefinite"></animate>
                     </stop>
                 </linearGradient>
              </defs>
              <text x="30" y="120" class="txt">patience is key in life</text>
          </svg>
    </main>
</body>
</html>