SVG绘制文字特效 html+css

最新推荐文章于 2024-03-26 11:48:38 发布

北极光之夜。

最新推荐文章于 2024-03-26 11:48:38 发布

阅读量1.9k

点赞数 5

分类专栏：前端大杂烩前端核心技术总结文章标签： css html svg 源码

本文链接：https://blog.csdn.net/luo1831251387/article/details/114580556

版权

前端大杂烩同时被 2 个专栏收录

123 篇文章 51 订阅

订阅专栏

前端核心技术总结

39 篇文章 17 订阅

订阅专栏

效果（源码在最后）：

在这里插入图片描述

实现：

定义基本标签，main是底层盒子，text是文本，SVG标签用法看这里：

<main>
          <svg width="500" height="200">
                 <text x="30" y="120" class="txt">北极光之夜。</text>
          </svg>
 <main>

定义文本标签text基本样式：

.txt{   
            font-family: 'fangsong';
            font-weight: 900;
            font-size: 80px;
            letter-spacing: 3px;
            fill: transparent;
            stroke: url("#yanse"); 
            stroke-width: 1.5px;
            stroke-dasharray: 625;
            stroke-dashoffset: 625;
            animation: draw 5s linear infinite;
        }

font-family: ‘fangsong’; 仿宋字体
letter-spacing: 3px;字间距
stroke: url("#yanse"); 边框颜色
stroke-width: 1.5px; 边框宽度
stroke-dasharray: 625; 定义虚线
stroke-dashoffset: 625; 偏移详细用法可以看这个
animation: draw 5s linear infinite; 动画。

定义动画：

@keyframes draw{
           0%,5%{
            stroke-dasharray: 625;
            stroke-dashoffset: 625;
            }
            40%,60%{
                stroke-dasharray: 625;
                 stroke-dashoffset: 0;
            }
            100%{
                stroke-dasharray: 625;
                 stroke-dashoffset: 625;
            }
        }

就是通过stroke-dasharray: x;与 stroke-dashoffset: x; 值的变化形成动态描边效果。详细用法可以看这个

定义SVG的渐变颜色标签与动画标签（SVG标签用法看这里）：

 <main>
          <svg width="500" 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">北极光之夜。</text>
          </svg>
    </main>

< linearGradient >< stop > …< /stop >< /linearGradient> 这个是定义一种渐变颜色。
然后在< stop >< /stop >里再定义一个动画< animate >< /animate >控制其颜色变化。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>北极光之夜</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: 'fangsong';
            font-weight: 900;
            font-size: 80px;
            letter-spacing: 3px;
            fill: transparent;
            stroke: url("#yanse"); 
            stroke-width: 1.5px;
            stroke-dasharray: 625;
            stroke-dashoffset: 625;
            animation: draw 5s linear infinite;
        }
        
        @keyframes draw{
           0%,5%{
            stroke-dasharray: 625;
            stroke-dashoffset: 625;
            }
            40%,60%{
                stroke-dasharray: 625;
                 stroke-dashoffset: 0;
            }
            100%{
                stroke-dasharray: 625;
                 stroke-dashoffset: 625;
            }
        }
    </style>
</head>
 
<body>
    <main>
          <svg width="500" 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">北极光之夜。</text>
          </svg>
    </main>
</body>
</html>

总结：

其它文章：
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等

北极光之夜。

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
SVG绘制文字特效 html+css

效果（源码在最后）：实现：定义基本标签，main是底层盒子，text是文本，SVG标签用法看这里：<main> <svg width="500" height="200"> <text x="30" y="120" class="txt">北极光之夜。</text> </svg> <main> 定义文本标签text基本样式：
复制链接

扫一扫