手把手教你,从零开始创建一个svg描边动画图片

最新推荐文章于 2024-06-20 23:01:49 发布

A青火

最新推荐文章于 2024-06-20 23:01:49 发布

阅读量408

点赞数

文章标签： svg 描边动画

本文链接：https://blog.csdn.net/qq_34006340/article/details/103288487

版权

本文将手把手教你如何从零开始创建一个SVG描边动画图片，通过在HTML中插入SVG元素，添加矩形，应用CSS动画，最终实现动态的描边效果。详细步骤包括创建SVG元素、定义矩形、设置CSS动画以及展示完整代码和动画效果。

摘要由CSDN通过智能技术生成

1.先在html中创建svg元素

<svg height="60" width="160"></svg>

2.在svg里面添加矩形元素rect

  <rect id="shape" height="60" width="160"/>

3.添加css描边动画

  // stroke-dasharray:第一个数值是实线长度,第二个数值是间隙长度
  // stroke-dashoffset:是描边线的偏移量(正值:左上角逆时针偏移量;负值:左上角顺时针偏移量)
  // stroke-width:描线宽度
  // fill:矩形填充色
  // stroke:描线颜色
  <style>
	   @keyframes lineAnimate {
          0% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: 20;
           }
         100% {
            stroke-dasharray: 100 120;
            stroke-dashoffset: -200;
         }
      }
     #shape {
      stroke-width: 6px;
      fill: transparent;
      stroke: #009FFD;
      animation: lineAnimate 3s infinite;
    }