Css绘制svg路径动画

I‘m fine

已于 2022-02-18 10:31:34 修改

阅读量1.3k

点赞数 1

分类专栏： svg 文章标签：动画 css css3 svg

于 2022-02-18 09:48:59 首次发布

本文链接：https://blog.csdn.net/weixin_43866528/article/details/122995966

版权

svg 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近发现了可以使用css中的animation制作svg动画

水珠流动–正向

重点： **class="svg_ani_flow"**

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
	<path d="M10 80 H 100 V 200 H 10" stroke="yellow"  stroke-linecap="round"  stroke-width="2" fill="transparent"  class="svg_ani_flow"></path>
</svg>

.svg_ani_flow {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 13, 5;
  }
}

@-webkit-keyframes ani_flow {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 13, 5;
  }
}

效果图

Video_20220218090652

水珠流动–反向

重点： **class="svg_ani_flow_back "**

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
	<path d="M10 80 H 100 V 200 H 10" stroke="yellow"  stroke-linecap="round"  stroke-width="2" fill="transparent"  class="svg_ani_flow_back "></path>
</svg>

.svg_ani_flow_back {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow_back 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow_back 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_back {
  from {
    stroke-dasharray: 13, 5;
  }
  to {
    stroke-dasharray: 10, 5;
  }
}

@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 10, 5;
  }
}

效果图

Video_20220218091532

水珠流动–停止

重点： **class="svg_ani_flow_stop "**

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
	<path d="M10 80 H 100 V 200 H 10" stroke="yellow"  stroke-linecap="round"  stroke-width="2" fill="transparent"  class="svg_ani_flow_stop "></path>
</svg>

.svg_ani_flow_stop {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow_stop 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow_stop 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 10, 5;
  }
}
	
@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 10, 5;
  }
}

效果图

在这里插入图片描述

水流

重点： **class="svg_circle_flow"**

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
	<path d="M10 80 H 100 V 200 H 10" stroke="yellow"  stroke-linecap="round"  stroke-width="2" fill="transparent"  class="svg_circle_flow"></path>
</svg>

.svg_circle_flow
{
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: ani_flow 10s linear infinite;
}

@keyframes ani_flow
{
	from {stroke-dashoffset: 170}
	to {stroke-dashoffset: 0}
}

蓄水池–填充

重点： **class="svg_ani_fill_h40"**

<svg style="transform: rotate(180deg)"> 
	<svg>
		<rect x="0" y="65" width="150" height="60" fill="#000000" stroke="#FFFFFF" stroke-width="4" ></rect>
		<line x1="8" y1="125" x2="142" y2="125" stroke="#000000" stroke-width="5"></line>
		<rect x="2" y="65" width="146" height="40" fill="#37cfe7" class="svg_ani_fill_h40"></rect>
	</svg>
</svg>

.svg_ani_fill_h40 {
  animation: ani_fill_h40 5s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_fill_h40 5s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_fill_h40 {
  from {
    height: 0px;
  }
  to {
    height: 40px;
  }
}

@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }
  to {
    stroke-dasharray: 10, 5;
  }
}