SVG绘制文字特效 html+css

效果(源码在最后):

实现:

  1. 定义基本标签,main是底层盒子,text是文本,SVG标签用法看这里:
<main>
          <svg width="500" height="200">
                 <text x="30" y="120" class="txt">北极光之夜。text>
          svg>
 <main>          
  1. 定义文本标签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; 动画。

  1. 定义动画:
@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; 值的变化形成动态描边效果。 详细用法可以看这个

  1. 定义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 >控制其颜色变化。

完整代码:


<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总结笔记
…等

你可能感兴趣的:(前端,SVG笔记与特效,css,html,svg,源码)