svg火车车厢箱体涂鸦动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg火车车厢箱体涂鸦动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - Train Graffiti </title>
  
  
  
  
<style>
body {
	background: #f2f2f2;
	min-height: 100vh;
	height: 100vh;
}

#contact_graff_bg {
	position: absolute;
	width: 100%;
	mix-blend-mode: soft-light;
	opacity: 0;
}

#contact_graff_bg .st0 {
	clip-path: url(#SVGID_2_graff_bg);
	stroke-width: 1;
	fill: none;
	stroke: #d6dad7;
	stroke-width: 18;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

#contact_graff_bg_outline {
	position: absolute;
	width: 100%;
	display: none;
}

#contact_graff_bg_outline .st0 {
	fill: none;
	stroke: #fdba08;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	mix-blend-mode: overlay;

	/* mix-blend-mode: soft-light;  */
}

#contact_graff_1,
#contact_graff_2,
#contact_graff_3,
#contact-graff-top {
	position: absolute;
	width: 100%;
	opacity: 0;
}

#contact_graff_bg {
	z-index: 1;
	transform: scale(1.15);
}
#contact_graff_bg_outline {
	z-index: 2;
}
#contact_graff_1 {
	z-index: 3;
}
#contact_graff_2 {
	z-index: 4;
}
#contact_graff_3 {
	z-index: 5;
}
#contact-graff-top {
	z-index: 6;
}

#contact_graff_1 .st0 {
	clip-path: url(#SVGID_2_graff_1);
	fill: none;
	stroke: #294738;
	stroke-width: 12;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

#contact_graff_2 .st0 {
	clip-path: url(#SVGID_2_graff_2);
	fill: none;
	stroke: #3ae20c;
	stroke-width: 16;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

#contact_graff_3 {
	opacity: 0;
}
#contact_graff_3 .st0 {
	fill: #5c721e;
}

#contact-graff-top .st0 {
	clip-path: url(#SVGID_2_graff-top);
	fill: none;
	stroke: #ffffff;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
}

#contact-intro {
	position: relative;
}

#contact-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#contact-svg .st0 {
	fill: #ffffff;
}
#contact-svg .st1 {
	fill: none;
	stroke: #ffffff;
	stroke-miterlimit: 10;
}
#contact-svg .st2 {
	fill: #e6ebed;
}
#contact-svg .st3 {
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
	stroke-miterlimit: 10;
}
#contact-svg .st4 {
	fill: #cccccc;
}
#contact-svg .st5 {
	fill: #f2f2f2;
}
#contact-svg .st6 {
	fill: #e6ebec;
}
#contact-svg .st7 {
	opacity: 0.55;
	fill: #cccccc;
}

@media (min-width: 1600px) {
}

.contact-canvas {
	width: 100%;
	margin: calc(50vh - 85px) auto 35px auto;
	max-width: 1040px;
	position: relative;
	display: block;
}

.contact-canvas img {
	max-width: 100%;
}

.graff_train {
	opacity: 0;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no" >
  <div class="contact-canvas">
	<svg version="1.1" id="contact-graff-top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1480 420" style="enable-background:new 0 0 1480 420;" xml:space="preserve">

		<defs>
			<path id="SVGID_1_graff-top" d="M761.3,129.6c-0.7,0-1.4-0.8-1.3-1.6c0.1-0.7,0.8-1.4,1.6-1.5c0.6-0.1,1.4,0.1,1.7,0.6
					c0.2,0.4,0.1,0.9-0.1,1.3c-0.2,0.3-0.5,0.6-0.9,0.9C762,129.3,761.6,129.6,761.3,129.6z M774.1,136.8c0.2,0.5,0.3,0.9,0.3,1.5
					c0,0.5-0.3,1-0.7,1.3c-0.5,0.2-1,0.1-1.5-0.2c-0.4-0.3-0.7-0.7-1-1.1c-1.1-1.5-2.7-2.6-4.2-3.7c-1-0.6-2.1-1.4-2.6-2.4
					c-0.5-1.1-0.3-2.7,0.7-3.2c0.4-0.2,1-0.3,1.6-0.2c2,0.1,3.8,1.4,4.9,2.9C772.6,133,773.3,134.9,774.1,136.8z M773.6,141.7
					c-0.3-0.2-0.8-0.2-1.1,0s-0.4,0.7-0.1,1c0.1,0.1,0.3,0.2,0.4,0.2c0.3,0.1,0.7,0,0.9-0.3C774.1,142.4,774.1,141.9,773.6,141.7
					c-0.2-0.2-0.7-0.1-1,0.1 M809.4,115.2c-0.4,0-0.7,0.4-0.5,0.8c0.1,0.3,0.7,0.4,0.9,0.2c0.2-0.2,0-0.8-0.4-0.8 M806.2,100.5
					c0.2-0.1,0.3-0.2,0.5-0.3c0.5-0.2,1-0.2,1.6-0.1c0.5,0.1,1,0.2,1.4,0.5c0.6,0.5,0.7,1.6,0.7,2.4c0,3.2-0.2,6.5-0.4,9.6
					c0,0.1,0,0.1,0,0.2c-0.1,0.2-0.3,0.2-0.5,0s-0.2-0.3-0.2-0.5c0-0.3,0-0.7,0-1c0.1-1.8-0.2-3.5-0.8-5.2c-0.1-0.3-0.2-0.6-0.5-0.8
					c-0.4-0.3-1.1-0.2-1.7-0.3c-1.1-0.2-1.9-1.5-1.6-2.6C804.9,101.5,805.6,101,806.2,100.5z M883,161.8c2.1,1.7,4.4,2.8,6.5,4.4
					c0.5,0.4,1.1,1,1.1,1.7c0,0.9-0.9,1.6-1.8,1.6s-1.7-0.6-2.3-1.3c-2.4-2.5-4.4-4.6-7.7-5.8c-0.9-0.4-1.9-0.7-2.6-1.5
					c-0.3-0.2-0.5-0.5-0.6-0.9s0-0.7,0.3-1c0.2-0.2,0.6-0.2,0.9-0.2C879.4,158.9,880.9,160.1,883,161.8z M892.8,171
					c0.3,0.2,0.7,0.3,1.1,0.1c-0.1-0.7-0.8-1.9-1.6-1.9c-0.6,0-0.9,0.5-0.4,1C892.2,170.5,892.5,170.8,892.8,171z M938.4,135.7
					c0.4,0,0.7-0.2,1-0.4c1.3-0.6,2.7-1.8,2.7-3.2s-0.8-2-2.1-1.5c-1.1,0.4-2.5,1.6-3.3,2.5C935.4,134.5,936.6,135.8,938.4,135.7z
					 M943.6,129.6c0,0.8-1.3,0.6-1.6,0.1C941.3,128.7,943.5,128.7,943.6,129.6z M967.2,128.2c0.8-1.3,2.7-3.7,2.7-5.2
					c0-0.8-0.5-0.9-1-1.4c-0.6-0.5-1-1.4-1.7-1.8c-0.2-0.2-0.5-0.3-0.6-0.5c-0.2-0.3-0.2-0.7-0.1-1.1c0.2-0.8,0.5-2.1,1.8-1.8
					c0.4,0.1,0.7,0.4,1,0.6c0.8,0.8,1.7,1.6,2.6,2.4c0.9,0.8,1.9,1.9,1.8,3.1c-0.1,0.8-0.7,1.6-1.4,2.3c-1.1,1.3-2,2.7-2.7,4.3
					c-0.2,0.6-0.5,1.1-0.9,1.7c-0.4,0.5-1.3,0.6-1.8,0.2c-0.4-0.3-0.5-0.9-0.3-1.4S967,128.6,967.2,128.2z M966.9,132.8
					c-0.3-0.1-0.7-0.3-1-0.3c-0.4,0-0.7,0.4-0.6,0.7c0.1,0.4,0.7,0.5,1.1,0.5c0.3,0,0.6-0.1,0.8-0.4c0.1-0.2,0-0.4-0.1-0.5
					s-0.4-0.1-0.5,0 M1004.7,163.2c0.9-0.4,2.1-1.1,1.8-2c-0.1-0.3-0.4-0.6-0.8-0.7c-1.3-0.4-5.6-0.5-6.6,0.7
					c-0.7,1,0.3,2.1,1.4,2.4c0.6,0.2,1.3,0.1,1.9,0.1c0.5,0,1-0.1,1.5-0.2C1004.1,163.5,1004.4,163.4,1004.7,163.2z M1008.7,162.1
					c-0.2-0.1-0.5-0.2-0.8-0.2s-0.5,0.2-0.6,0.4c-0.1,0.4,0.3,0.8,0.7,0.9c0.3,0.1,0.6,0.1,0.9,0c0.3-0.1,0.5-0.4,0.4-0.7
					s-0.5-0.4-0.9-0.4 M1011.8,162.9c-0.3-0.3-0.9-0.3-1,0c-0.1,0.2,0,0.4,0.2,0.6c0.2,0.1,0.4,0.2,0.6,0.2c0.2,0,0.4,0,0.6-0.1
					c0.2-0.2,0.2-0.6,0-0.8s-0.6-0.2-0.9-0.2 M595.9,127.9c-2.1,0.8-4.2,1.6-6.4,2.2c-1.6,0.4-3.4,0.4-3.2,2.5
					c0.2,2.2,0.4,4.5,0.6,6.7c0,0.3,0.1,0.6,0.2,0.9c0.4,0.7,1.6,0.7,2.2,0.2c0.6-0.5,0.8-1.4,0.9-2.2c0.1-0.7,0.1-1.6,0-2.3
					c-0.1-0.4-0.2-1,0.1-1.4c0.1-0.1,0.3-0.2,0.4-0.3c2.8-1.7,6.1-2.8,8.5-5c0.2-0.2,0.5-0.5,0.6-0.8s0.1-0.7-0.2-0.9
					c-0.1-0.1-0.3-0.1-0.4-0.1C598.1,126.8,596.9,127.4,595.9,127.9z M603.5,126.4c0,0.1,0,0.2,0,0.3c-0.1,0.2-0.2,0.3-0.4,0.3
					c-0.5,0.3-1,0.5-1.6,0.7c-0.2,0.1-0.5,0.1-0.6,0s-0.1-0.3-0.1-0.4s0-0.3,0.1-0.4c0-0.1,0.1-0.1,0.1-0.2c0.2-0.3,0.6-0.5,0.9-0.6
					c0.3-0.1,0.6-0.3,0.9-0.3C603.1,125.9,603.4,126.1,603.5,126.4z" />
		</defs>
		<clipPath id="SVGID_2_graff-top">
			<use xlink:href="#SVGID_1_graff-top" style="overflow:visible;" />
		</clipPath>
		<path class="st0" d="M674,86.8c-10.7,13.1-25.5,22.8-41.7,27.6c-6.8,2-13.8,3.1-20.4,5.4c-7.2,2.5-13.8,6.5-20.2,10.3
				c-1,0.6-2.2,1.4-2.8,2.4c-0.5,0.9-0.6,2.2-0.7,3.2c-0.4,6.7-0.7,13.4-1.1,20c15.9,16.4,39.9,19.2,60.6,10
				c18.8-8.3,31.4-26.2,41.6-44c10.1-17.8,19-37,33.9-51.2c17,24.3,34,48.7,51,73c2.5,3.7,5.3,7.4,9.5,8.9
				c6.8,2.4,14.1-2.5,17.9-8.6c9.8-15.4,4.9-35.7,7.4-53.8c0.4-2.9,1.1-5.9,3.3-7.8c2.9-2.5,7.5-2,10.7,0.1s5.3,5.5,7.3,8.9
				c17.3,29.2,33.7,61.1,62.7,78.8c3.2,2,6.9,3.8,10.6,3.4c5.1-0.5,8.9-4.9,12-9c8.7-11,17.2-21.8,25.9-32.8
				c1.3-1.6,2.5-3.2,2.6-5.1c0.3-4.3-5.2-6.9-9.3-5.6c-4.1,1.4-6.7,5.1-9.1,8.7c-1,1.6-2.2,3.5-1.4,5.2c0.4,0.9,1.4,1.5,2.3,2
				c8.9,5.1,19.7,8.1,29.3,4.5c5-2,8.7-5.9,11-10.7c1.5-3,5.2-8,3.7-11.5c-0.6-1.3-1.8-2.2-2.8-3.1c-4.3-3.8-8-8-4.3-13.6
				c2.8-4.2,8.7-6.4,13.5-6.8c10-0.7,19.9,1.9,29.5,4.6c14.3,4,29,8.1,40.8,17.1c11.8,9.1,20.1,24.2,16.7,38.7
				c-0.6,2.5-1.6,4.9-3.2,6.8c-2.7,2.9-6.9,4.1-10.8,4.6c-11.1,1.7-22.5,0.7-33.3-2.7c-7.6-2.5-16.5-6.1-23-1.4
				c-2.5,1.8-4.2,4.6-5.5,7.4c-5.2,10.6-7.8,22.6-7.4,34.5" />

	</svg>
	<svg version="1.1" id="contact_graff_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1480 420" style="enable-background:new 0 0 1480 420;" xml:space="preserve">

		<path class="st0" d="M699.1,160.9l-5.1,16.8c0,0-1.6,3.4,1.9,0.4l4.5-2.8l4.2,0.2c0,0,2.2-4.7,0-4.9l-1.4-12.2
												 C702.9,158.4,702.9,150.8,699.1,160.9z" />

		<polygon class="st0" points="744,165 737.3,171.8 743.6,176.1 752.2,170 		" />
		<path class="st0" d="M757.1,173.9l3.1,14.4l4.7,2.7c0,0-3-11.5-2.9-14L757.1,173.9z" />
		<polygon class="st0" points="767.9,192.5 775.8,186.7 779.4,187.5 769.4,192.9 		" />
		<polygon class="st0" points="771.1,193.6 779.4,189 787.4,193.9 782,198.3 		" />
		<path class="st0" d="M744.7,202.9c0,0-8.5,8.3-9.1,9.9l-6.6-9.2l8.6-9.2l-0.1,2.9L744.7,202.9z" />
		<polygon class="st0" points="728,205.5 721.6,212.5 729.3,220.3 734.2,214.2 		" />
		<polygon class="st0" points="721,221.7 723.8,218.5 731,225.9 728.8,229.1 		" />
		<path class="st0" d="M667.5,264l1.4,9.7l8,3.9c0,0,3.4,1.3,3.1-1.4l-1.9-6.5l-9.6-5.7C668.6,264,667.4,263.6,667.5,264z" />
		<polygon class="st0" points="837.3,187 834.7,191.4 835.9,194.1 846.9,193.9 851.9,187 		" />
		<polygon class="st0" points="872.9,185.2 863.1,193.7 871.4,193.7 878.8,185.2 		" />
		<polygon class="st0" points="848.6,213.2 856.7,204.2 857.3,227.1 		" />
		<polygon class="st0" points="962.9,215.4 962.9,224.1 971.3,224.1 971.3,211.9 		" />
		<polygon class="st0" points="962.9,211.9 962.9,214.4 971.3,210.5 971.3,207.7 		" />
		<path class="st0" d="M971.4,178.5l5.3-3.5c0,0,2.8-1.4,4.3,1.1s5,7.2,5,7.2l4.7,6.2L971.4,178.5z" />
		<polygon class="st0" points="883.6,185 874.6,193.7 873.2,193.7 881.6,185 		" />
		<polygon class="st0" points="967.8,197.6 967.8,200 959,206.1 959,204.2 		" />
		<polygon class="st0" points="959,207.7 959,207 967.8,200.7 967.8,201.4 		" />
		<polygon class="st0" points="974.6,235.7 982.1,229 928.2,229 921.4,235.7 		" />
		<path class="st0" d="M1025.5,258.3l10.6-6.2l16.7,25.2c0,0,1.4,0.9-1.7,1.3h-10.6L1025.5,258.3z" />
		<polygon class="st0" points="844.9,286.4 858.4,271.9 859.2,297.8 842.4,297.8 844.1,296.2 		" />

		<path class="st0" d="M718.1,145.4c0,0,1.6,7,1.4,8l7-1.1v-3L718.1,145.4z" />
		<polygon class="st0" points="748.1,152.4 754.1,163 765.1,164.3 759.4,153 			" />
		<polygon class="st0" points="656.9,143.1 654,149.4 660.2,156.3 662.1,155.2 664.3,150.4 			" />
		<path class="st0" d="M669.6,162.4l6.3,6.1l5.8-3.4l5.4-11.1c0,0,2.5-4.1-2..........完整代码请登录后点击上方下载按钮下载查看