柳意梧情

心在哪里收获就在哪里
加载
首页 » 建站教程 » CSS3 SVG文字线条填色动画特效代码

CSS3 SVG文字线条填色动画特效代码

CSS3 SVG文字线条填色动画特效.png

下面是HTML代码部分
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 SVG文字线条填色动画特效</title>

<style type="text/css">
body {
  background: #343434;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.st1 {
  stroke: #eec6e0;
  stroke-width: 1;
  fill: transparent;
}

.dot {
  fill: url(#radial);
  stroke: none;
}

.st0 {
  stroke: #de1b55;
  stroke-width: 1;
  stroke-dasharray: 770;
  stroke-dashoffset: 0;
  animation: dash 10s ease-in-out;
  opacity: 10;
  fill: url(#linear);
}

@keyframes dash {
  0% {
    stroke-dashoffset: 670;
    fill: none;
    opacity: 0;
  }
  30% {
    opacity: 5;
    fill: none;
    stroke-dashoffset: 770;
    opacity: 10;
    stroke: #de1b55;
  }
  80% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 10;
    fill: url(#linear);
  }
}

</style>

</head>

<body>

<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 305 120" style="enable-background:new 0 0 305 120;" xml:space="preserve" >
<defs>
	<linearGradient id="linear" x1="0%" y1="0%" 
																	x2="100%" y2="0%">
<stop offset="0%"   stop-color="#f67a92">
			<stop offset="20%"  stop-color="#de1b55">
			<stop offset="40%"  stop-color="#b00539">
			<stop offset="60%"  stop-color="#b5678e">
<stop offset="80%"  stop-color="#eec6e0">
			<stop offset="100%" stop-color="#f67a92">
	</linearGradient>
	
	<radialGradient id="radial"             		
																	gradientUnits="objectBoundingBox"
												cx="0.5" cy="0" r="1">>
		<stop offset="0" stop-color="#de1b55">
<stop offset="0.5" stop-color="#f67a92">
		<stop offset="1"   stop-color="#de1b55">
</radialGradient>

<path id="infinite-love"  
		d="M167.41,84.98
					c0.99,0.67,2.26,1.14,3.33,1.47
					c2.24,0.67,4.67,0.62,7.3-0.14
					c2.62-0.77,5.01-2.06,7.15-3.88
					c0.61,0.43,1.4,0.91,2.37,1.44
					c0.97,0.53,1.97,1.02,3.02,1.47
					c1.04,0.46,2.09,0.86,3.13,1.22
					c1.04,0.36,1.95,0.59,2.71,0.68
					c1.17,0.14,2.05,0.2,2.64,0.18
					c0.58-0.02,1.08-0.06,1.49-0.11
					c0.87-0.1,1.74-0.3,2.64-0.61
					c0.89-0.31,1.62-0.61,2.18-0.9
		c1.27-0.72,2.22-1.32,2.83-1.8
					c0.61-0.48,1.35-1.05,2.22-1.73
					c0.46-0.38,0.89-0.73,1.3-1.04
					c0.04-0.03,0.08-0.08,0.12-0.11
		c0.17,0.78,0.42,1.49,0.8,2.08
					c0.97,1.34,2.2,2.38,3.71,3.13
					c1.5,0.74,2.84,1.11,4.01,1.11
					c2.29,0.05,4.3-0.47,6.04-1.55
		c1.73-1.08,3.41-2.84,5.04-5.28
					c0.97,0.48,1.97,0.64,3.02,0.47
					c1.04-0.17,2.03-0.53,2.94-1.08
					c0.54-0.32,1.03-0.7,1.51-1.1
		l-0.13,0.63c-0.41,1.97-0.7,3.49-0.88,4.56
					c-0.18,1.08,0.01,1.81,0.57,2.19
					c0.31,0.19,0.73,0.35,1.26,0.47
		c0.54,0.12,1.08,0.2,1.64,0.25
					c0.56,0.05,1.08,0.08,1.57,0.11
					c0.48,0.02,0.8,0.04,0.96,0.04
					c0.87-0.05,1.49-0.3,1.87-0.75
		c0.38-0.46,0.78-0.97,1.18-1.55
					c0.51-0.72,1.07-1.52,1.68-2.41
					c0.61-0.89,1.2-1.73,1.76-2.51
					c0.56-0.79,1.04-1.47,1.45-2.05
		c0.41-0.58,0.66-0.91,0.76-1.01
					c0.31,0.67,0.69,1.19,1.15,1.55
					c0.46,0.36,0.97,0.68,1.53,0.97
					c0.31,0.14,0.74,0.28,1.3,0.4
		c0.56,0.12,1.18,0.18,1.87,0.18
					c0.69,0,1.4-0.08,2.14-0.25
					c0.51-0.12,0.98-0.3,1.43-0.52
					c0.11,1.21,0.44,2.38,0.97,3.51
		c0.71,1.49,1.76,2.6,3.13,3.34
					c1.38,0.74,2.75,1.21,4.13,1.4
					c0.83,0.12,3.86,0.5,4.86,0.39
					c31.51-3.25,30.71-44.11,9.84-64.9
		c-21.63-21.56-57.19-24.24-85.2-16.05
					c-25.24,7.38-45.9,24.03-71.41,42.91
					c-7.48-5.81-14.82-11.83-22.08-18.06
		C90.51,18.25,71.99,7.44,50.52,6.2
					c-19.8-1.14-32.83,5.54-43.15,25.63
					c-6.21,12.09-7.16,35.45,4.47,50.16
		c9.46,11.96,30.57,15.95,44,13.59
					c18.17-3.2,33.22-12.93,49.05-21.99
					c7.99-4.57,15.72-9.9,23.39-15.51
		c11.79,9.01,23.91,17.53,36.72,25.48
					C165.61,83.93,167.04,84.73,167.41,84.98z M101.52,67.82
					c-19.07,10.91-37.5,23.6-59.68,20.17
		C30.6,86.25,18.6,79.33,13.68,68.94c-6.24-13.19-2.42-31.52,4.62-40.87
					c20.83-27.67,59.65-11.57,83.22,8.41
		c7.04,5.97,14.11,11.75,21.28,17.37
					C115.85,58.87,108.81,63.66,101.52,67.82z M176.55,81.85c-1.02,0.62-2.27,0.93-3.74,0.93
		c-0.56,0-1.13-0.15-1.72-0.47c-0.59-0.31-0.93-0.73-1.03-1.26c-0.05-0.24-0.05-0.53,0-0.86
					c0.05-0.33,0.28-0.69,0.69-1.08
		c0.66-0.67,1.57-1.05,2.71-1.15
					c1.15-0.1,2.23-0.1,3.25,0
					c0.92,0.1,1.52,0.19,1.8,0.29
					c0.28,0.1,0.73,0.24,1.34,0.43
		C178.66,80.18,177.57,81.23,176.55,81.85z M228.1,68.12c-0.48,0.19-0.85,0.43-1.11,0.72
					c-0.2,0.19-0.42,0.48-0.65,0.86
		c-0.23,0.39-0.39,0.89-0.5,1.51
					c-0.2,1.05-0.26,2.07-0.15,3.06
					c0.1,0.98,0.51,2.03,1.22,3.13
					c-0.1,0.24-0.19,0.42-0.27,0.54
		c-0.08,0.12-0.14,0.23-0.19,0.32
					c-1.12,2.11-2.57,3.48-4.36,4.1c-0.51,0.19-1.03,0.25-1.57,0.18
					c-0.54-0.07-1.03-0.3-1.49-0.68
		c-0.76-0.62-1.15-1.4-1.15-2.34
					s0.08-1.86,0.23-2.77
					c0.1-0.67,0.33-1.55,0.69-2.62
					c0.36-1.08,0.83-2.17,1.41-3.27
		c0.58-1.1,1.27-2.13,2.06-3.09
					c0.79-0.96,1.69-1.65,2.71-2.08
					c0.46-0.24,0.94-0.35,1.45-0.32
					c0.51,0.02,0.97,0.11,1.38,0.25
		c0.36,0.1,0.73,0.31,1.11,0.65
					c0.38,0.34,0.55,0.84,0.5,1.51
					C229.03,67.81,228.58,67.93,228.1,68.12z M210.91,11.1
		c20.83-3.98,44.61-1.62,62.35,10.79
					c17.16,12.01,24.95,37.32,17.55,49.88
					c0,0-3.08,7.49-15.42,11.7
		c-3.77,0.06-5.47-1.07-5.99-1.47
					c-0.66-0.53-0.99-1.25-0.99-2.16
					c0-0.38,0.05-0.72,0.15-1.01
					c0.1-0.29,0.31-0.65,0.61-1.08
		c0.25,0.24,0.62,0.43,1.11,0.57c0.48,0.14,0.98,0.23,1.49,0.25c0.51,0.02,1.02,0.02,1.53,0c0.51-0.02,0.92-0.11,1.22-0.25
		c0.92-0.33,1.76-0.79,2.52-1.37c0.76-0.58,1.45-1.22,2.06-1.94c0.61-0.72,1.15-1.47,1.61-2.26c0.46-0.79,0.84-1.57,1.15-2.34
		c0.46-1.29,0.69-2.5,0.69-3.63c0-1.13-0.43-2.19-1.3-3.2c-0.87-1.1-1.92-1.86-3.17-2.26c-1.25-0.41-2.38-0.56-3.4-0.47
		c-1.78,0.14-3.44,0.8-4.97,1.98c-1.53,1.17-2.88,2.72-4.05,4.64c-1.63,2.73-2.75,5.39-3.36,7.98c-0.07,0.29-0.09,0.58-0.14,0.87
		c-0.34,0.35-0.77,0.67-1.39,0.93c-0.92,0.38-1.71,0.55-2.37,0.5c-1.02-0.05-1.87-0.46-2.56-1.22c-0.69-0.77-1.08-1.56-1.18-2.37
		c0.2-0.29,0.58-0.85,1.15-1.69c0.56-0.84,1.12-1.64,1.68-2.41c0.46-0.67,0.97-1.38,1.53-2.12c0.56-0.74,1.07-1.5,1.53-2.26
		c0.46-0.77,0.79-1.5,0.99-2.19c0.2-0.69,0.2-1.33,0-1.91c-0.2-0.53-0.52-0.9-0.96-1.11c-0.43-0.22-0.88-0.37-1.34-0.47
		c-1.02-0.1-2.02,0.16-3.02,0.76c-0.99,0.6-1.85,1.52-2.56,2.77c-0.56,0.96-1.02,2.18-1.38,3.67c-0.36,1.49-0.59,2.88-0.69,4.17
		c-0.15,0.19-0.37,0.48-0.65,0.86c-0.28,0.38-0.59,0.8-0.92,1.26c-0.33,0.46-0.7,0.93-1.11,1.44c-0.41,0.5-0.79,0.99-1.15,1.47
		c-0.26,0.34-0.52,0.67-0.8,1.01c-0.28,0.34-0.55,0.67-0.8,1.01c-0.31,0.39-0.59,0.77-0.84,1.15c-0.2,0.19-0.41,0.24-0.61,0.14
		c-0.2-0.1-0.28-0.34-0.23-0.72c0.05-0.43,0.16-1.11,0.34-2.05c0.18-0.93,0.34-1.81,0.5-2.62c0.25-1.1,0.46-2.1,0.61-2.98
		c0.15-0.89,0.43-1.98,0.84-3.27c0.36-1.05,0.71-2.18,1.07-3.38c0.36-1.2,0.36-2.04,0-2.52c-0.31-0.34-0.89-0.51-1.76-0.54
		c-0.87-0.02-1.66-0.04-2.37-0.04c-0.46,0-0.79,0.05-0.99,0.14c-0.2,0.1-0.36,0.36-0.46,0.79L239.8,74.5
		c-0.3,0.39-0.56,0.82-0.89,1.17c-0.71,0.77-1.45,1.39-2.22,1.87c-0.76,0.48-1.52,0.8-2.25,0.97c-0.74,0.17-1.36,0.08-1.87-0.25
		c0.51-0.91,0.97-2.02,1.38-3.34c0.41-1.32,0.76-2.77,1.07-4.35c0.25-1.25,0.31-2.55,0.15-3.92c-0.15-1.37-0.82-2.6-1.99-3.7
		c-1.17-1.1-2.61-1.77-4.32-2.01c-1.71-0.24-3.22-0.24-4.55,0c-1.43,0.29-2.73,0.8-3.9,1.55s-2.24,1.62-3.21,2.62
		c-0.97,1.01-1.81,2.1-2.52,3.27c-0.71,1.18-1.32,2.34-1.83,3.49c-0.31,0.72-0.57,1.58-0.8,2.59c-0.23,1.01-0.38,2.05-0.46,3.13
		c-0.01,0.14,0,0.28-0.01,0.42c-0.38,0.29-0.76,0.58-1.18,0.87c-0.51,0.36-0.99,0.67-1.45,0.93c-0.46,0.26-0.82,0.47-1.07,0.61
		c-2.9,1.63-5.86,2.29-8.86,1.98c-3.01-0.31-6.24-1.88-9.71-4.71l6.8-11.57c1.99-0.19,3.89-0.45,5.69-0.79
		c1.81-0.33,3.6-0.84,5.39-1.51c4.13-1.58,7.3-3.51,9.52-5.79c2.22-2.28,3.76-5.24,4.62-8.88c0.15-0.58,0.24-1.25,0.27-2.01
		c0.02-0.77-0.04-1.55-0.19-2.34c-0.15-0.79-0.4-1.56-0.73-2.3c-0.33-0.74-0.8-1.38-1.41-1.91c-1.22-1.1-2.68-1.78-4.36-2.05
		c-1.68-0.26-3.13-0.32-4.36-0.18c-1.99,0.29-3.87,1.04-5.65,2.26c-1.78,1.22-3.4,2.64-4.85,4.24c-1.45,1.61-2.73,3.25-3.82,4.93
		c-1.1,1.68-1.97,3.09-2.64,4.24l-3.82,6.69c-0.51-0.24-0.96-0.48-1.34-0.72c-0.38-0.24-0.88-0.72-1.49-1.44
		c-0.92-1.05-1.48-2.19-1.68-3.42c-0.2-1.22-0.18-2.29,0.08-3.2c0.41-1.63,1.09-3.01,2.06-4.13c0.97-1.13,2.5-2.07,4.58-2.84
		c0.36-0.14,0.5-0.37,0.42-0.68c-0.08-0.31-0.17-0.63-0.27-0.97c-0.26-0.48-0.5-0.75-0.73-0.83c-0.23-0.07-0.55-0.04-0.96,0.11
		c-0.31,0.1-0.79,0.28-1.45,0.54c-0.66,0.26-1.25,0.52-1.76,0.75c-0.87,0.38-1.67,0.9-2.41,1.55c-0.74,0.65-1.39,1.38-1.95,2.19
		c-0.56,0.82-1.02,1.69-1.38,2.62c-0.36,0.93-0.56,1.86-0.61,2.77c-0.1,2.01,0.31,3.99,1.22,5.93c0.92,1.94,2.85,3.75,5.81,5.43
		l-5.58,10.14c-1.28-0.34-2.56-0.61-3.86-0.83c-1.3-0.22-2.57-0.29-3.82-0.22c-1.25,0.07-2.46,0.34-3.63,0.79
		c-1.17,0.46-2.27,1.19-3.29,2.19c-0.2,0.2-0.33,0.41-0.5,0.61c-11.58-7.23-22.66-14.93-33.44-23.07
		C157.84,36.09,181.64,16.69,210.91,11.1z M270.7,71.58c0.05-0.19,0.19-0.58,0.42-1.15c0.23-0.57,0.51-1.2,0.84-1.87
		c0.33-0.67,0.73-1.31,1.18-1.91c0.46-0.6,0.92-1.02,1.38-1.26c0.41-0.19,0.8-0.27,1.18-0.25c0.38,0.02,0.67,0.08,0.88,0.18
		c0.46,0.29,0.73,0.62,0.8,1.01c0.08,0.38,0.09,0.72,0.04,1.01c-0.15,1.01-0.54,2.15-1.15,3.41c-0.61,1.27-1.5,2.24-2.68,2.91
		c-0.41,0.24-0.76,0.36-1.07,0.36c-0.31,0-0.66-0.05-1.07-0.14c-0.31-0.1-0.57-0.31-0.8-0.65
		C270.43,72.89,270.45,72.34,270.7,71.58z M254.27,68.12c0.05-0.43,0.15-0.84,0.31-1.22c0.15-0.67,0.41-1.34,0.76-2.01
		c0.25-0.48,0.51-0.91,0.76-1.29c0.25-0.38,0.64-0.67,1.15-0.86c0.25-0.1,0.46-0.04,0.61,0.18c0.15,0.22,0.15,0.44,0,0.68
		L254.27,68.12z M198.02,62.09c0.51-1.25,1.04-2.42,1.61-3.52c0.56-1.1,1.17-2.32,1.83-3.67c0.76-1.48,1.57-2.96,2.41-4.42
		c0.84-1.46,1.74-2.78,2.71-3.95c0.97-1.17,2.01-2.13,3.13-2.88c1.12-0.74,2.34-1.19,3.67-1.33c0.56-0.1,1.13-0.05,1.72,0.14
		c0.58,0.19,1.13,0.58,1.64,1.15c0.51,0.57,0.78,1.29,0.8,2.16c0.02,0.86-0.11,1.73-0.42,2.59c-1.07,3.21-2.8,5.96-5.2,8.23
		c-2.4,2.28-5.4,3.89-9.02,4.85c-1.02,0.29-1.87,0.47-2.56,0.54C199.67,62.05,198.89,62.09,198.02,62.09z">

	
</defs>

<use xlink:href="#infinite-love" class="st1" />
<use xlink:href="#infinite-love" class="st0" />
<!--<use xlink:href="#dot" class="dot">-->
<circle class="dot" id="dot" cx="1" cy="1" r="3">
<animateMotion dur="16s" repeatCount="indefinite">
  <mpath xlink:href="#infinite-love"></mpath>
</animateMotion>
		  </circle>
</svg>

</body>
</html>



收录详情:百度已收录
版权声明:本文内容源自互联网,由(柳意梧情)整编。
文章标题:CSS3 SVG文字线条填色动画特效代码
本文地址:https://blog.liuyiwuqing.cn/Site/120.html
本文最后更新于2019-6-4,已超过半年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
版权所有,转载注意明处:柳意梧情博客 » CSS3 SVG文字线条填色动画特效代码

WRITTEN BY:柳意梧情

avatar

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

2992 sitemap