SVG 迷宫藏字路径自动绘制动画 - 踏得网

绘制动画使用CSS3的stroke-dashoffset属性来实现。

svg，polyline

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2370
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="container">
    <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 285.964 130.983" enable-background="new 0 0 285.964 130.983" xml:space="preserve">

<g id="Layer_3">
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="13.5,0 13.5,8.5 0.5,8.5 0.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="20.5,0 20.5,29.5 6.5,29.5 6.5,15.5 13.5,15.5 13.5,21 
		13.5,22 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="-0.5,15 -0.5,36.5 13.5,36.5 13.5,44.5 20.5,44.5 
		20.5,36.5 27.5,36.5 27.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="64,0.5 35.5,0.5 35.5,36.5 49,36.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="48.5,15 48.5,30.5 41.5,30.5 41.5,7.5 63.5,7.5 63.5,15.5 
		56.5,15.5 56.5,36.5 64,36.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="70.5,0 70.5,22.5 63.5,22.5 63.5,29.5 71.5,29.5 71.5,43.5 
		42.5,43.5 42.5,57 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="72,43.5 77.5,43.5 77.5,58.5 70.5,58.5 70.5,51.5 
		63.5,51.5 63.5,79.5 71,79.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="48.5,58 48.5,50.5 56.5,50.5 56.5,80.5 48.5,80.5 
		48.5,87.5 70,87.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="69.5,72 69.5,65.5 77.5,65.5 77.5,94.5 42.5,94.5 
		42.5,73.5 49.5,73.5 49.5,65.5 35.5,65.5 35.5,43.5 29,43.5 27.5,43.5 27.5,33 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="20.5,44 20.5,51.5 28.5,51.5 28.5,57 28.5,58 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="6.5,43 6.5,51.5 14,51.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="-0.5,43 -0.5,58.5 7,58.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="21,58.5 13.5,58.5 13.5,65.5 21.5,65.5 21.5,73.5 6.5,73.5 
		6.5,95.5 35.5,95.5 35.5,79.5 28.5,79.5 28.5,65 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="21,80.5 13.5,80.5 13.5,87.5 28,87.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="7,65.5 -0.5,65.5 -0.5,80 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="-0.5,87 -0.5,101.5 6.5,101.5 6.5,108.5 14.5,108.5 
		14.5,95 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="-0.5,109 -0.5,122 -0.5,123 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="0,130.5 6.5,130.5 6.5,115.5 20.5,115.5 20.5,130 20.5,131 
			" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="13.5" y1="123" x2="13.5" y2="131" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="43" y1="73.5" x2="29" y2="73.5" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="29,102.5 20.5,102.5 20.5,109.5 34.5,109.5 34.5,101.5 
		77.5,101.5 77.5,131 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="27.5,116 27.5,131.5 35.5,131.5 35.5,116.5 43,116.5 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="41.5" y1="131" x2="41.5" y2="123" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="48.5,131 48.5,116.5 56.5,116.5 56.5,131 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="42,108.5 70.5,108.5 70.5,123.5 63.5,123.5 63.5,116 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="78,109.5 99.5,109.5 99.5,116.5 105.5,116.5 105.5,101.5 
		120.5,101.5 120.5,94 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="86" y1="94.5" x2="254" y2="94.5" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="86,101.5 98.5,101.5 98.5,95 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="254.5,79 254.5,57.5 276.5,57.5 276.5,102 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="261.5,79 261.5,65.5 268.5,65.5 268.5,108.5 284,108.5 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="283" y1="116.5" x2="276" y2="116.5" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="284,123.5 268.5,123.5 268.5,116 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="262,108.5 254.5,108.5 254.5,117.5 261.5,117.5 261.5,122 
		261.5,123 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="240.5,109 240.5,101.5 247.5,101.5 247.5,116.5 233,116.5 	
		" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="262,130.5 254.5,130.5 254.5,123.5 226.5,123.5 226.5,116 	
		" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="227,109.5 233.5,109.5 233.5,101.5 219.5,101.5 
		219.5,109.5 205.5,109.5 205.5,94 205.5,116 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="212.5" y1="94" x2="212.5" y2="102" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="219.5,123 219.5,116.5 211.5,116.5 211.5,130.5 227,130.5 	
		" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="170,101.5 198.5,101.5 198.5,116.5 191.5,116.5 
		191.5,108.5 183.5,108.5 183.5,123 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="133.5,94 133.5,108.5 155.5,108.5 155.5,131 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="141,101.5 162.5,101.5 162.5,109.5 177.5,109.5 
		177.5,130.5 161.5,130.5 161.5,116.5 169.5,116.5 169.5,121 169.5,122 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="204.5,131 204.5,122.5 190.5,122.5 190.5,130.5 184,130.5 	
		" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="148,130.5 105.5,130.5 105.5,123.5 147.5,123.5 
		147.5,116.5 113,116.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="113,108.5 127.5,108.5 127.5,94 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="99,123.5 91.5,123.5 91.5,116.5 84.5,116.5 84.5,129 
		84.5,131 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="91.5,0 91.5,7.5 76.5,7.5 76.5,36.5 84.5,36.5 84.5,15.5 
		91.5,15.5 91.5,29 91.5,30 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="197.5" y1="24" x2="197.5" y2="37" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="98.5" y1="0" x2="98.5" y2="24" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="105.5,0 105.5,15.5 112.5,15.5 112.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="119.5,0 119.5,15.5 141.5,15.5 141.5,8.5 147.5,8.5 
		147.5,0 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="147.5" y1="8" x2="147.5" y2="23" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="134.5,0 134.5,7.5 126.5,7.5 126.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="162.5,0 162.5,8.5 155.5,8.5 155.5,22 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="163,15.5 169.5,15.5 169.5,0.5 198,0.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="182.5,0 182.5,16.5 176.5,16.5 176.5,7 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="199,7.5 189.5,7.5 189.5,15.5 205.5,15.5 205.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="218.5,0 218.5,8.5 212.5,8.5 212.5,22.5 204.5,22.5 
		204.5,29 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="225.5,0 225.5,16.5 219.5,16.5 219.5,29.5 212,29.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="226.5,36 226.5,22.5 233.5,22.5 233.5,0 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="240.5,0 240.5,29.5 234,29.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="241,29.5 246.5,29.5 246.5,65.5 234,65.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="268.5,0 268.5,8.5 246.5,8.5 246.5,22.5 254.5,22.5 
		254.5,51.5 276.5,51.5 276.5,30 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="275.5" y1="0" x2="275.5" y2="22" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="84.5,36 84.5,44.5 98.5,44.5 98.5,52.5 94.5,52.5 
		94.5,62.5 101,62.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="85,51.5 87.5,51.5 87.5,80.5 83.5,80.5 83.5,87.5 
		98.5,87.5 98.5,80.5 94.5,80.5 94.5,69.5 113.5,69.5 113.5,80.5 110,80.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="109.5,94 109.5,87.5 123.5,87.5 123.5,80.5 119.5,80.5 
		119.5,51.5 123.5,51.5 123.5,44.5 108.5,44.5 108.5,51.5 112.5,51.5 112.5,62.5 108,62.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="92,36.5 98.5,36.5 98.5,29.5 106.5,29.5 106.5,37.5 
		123.5,37.5 123.5,29.5 113,29.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="145,29.5 130.5,29.5 130.5,51.5 134.5,51.5 134.5,80.5 
		130.5,80.5 130.5,87.5 134,87.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="142,87.5 145.5,87.5 145.5,79.5 140.5,79.5 140.5,50.5 
		145.5,50.5 145.5,44.5 138,44.5 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="138,36.5 169.5,36.5 169.5,44 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" points="161,80.5 166.5,80.5 166.5,88.5 
		161,88.5 	" />
            <path fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" d="M161.5,81" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" points="151.5,36 151.5,29.5 176.5,29.5 
		176.5,44.5 191.5,44.5 191.5,51.5 187.5,51.5 187.5,88 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" points="177,51.5 180.5,51.5 180.5,74 
		165,43.5 151.5,43.5 151.5,50.5 155.5,50.5 155.5,80.5 151.5,80.5 151.5,94 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" points="177,37.5 183.5,37.5 183.5,24 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" x1="190.5" y1="29" x2="190.5" y2="37" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="198,44.5 214.5,44.5 214.5,51.5 208.5,51.5 208.5,80.5 
		214.5,80.5 214.5,87.5 197.5,87.5 197.5,80.5 203.5,80.5 203.5,51.5 198,51.5 	" />
            <path fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" d="M208.875,64.625" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" points="240,44.5 218.5,44.5 218.5,51.5 
		222,51.5 208.75,64.75 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-width="1.0457" stroke-miterlimit="10" x1="222.75" y1="80.375" x2="208.5" y2="66" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="222.5" y1="88" x2="222.5" y2="80" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="231.625,51 216.52,66.105 231.02,80.605 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="223,87.5 234.5,87.5 234.5,94 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="253.5,95 253.5,101.5 260.5,101.5 260.5,87.5 246.5,87.5 
		246.5,72 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="440.5,-23 440.5,-0.5 433,-0.5 426.421,6.04 433.921,13.5 
		440.5,13.5 440.5,33 	" />
            <path fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" d="M397-23.5" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="98" y1="24.5" x2="197" y2="24.5" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" x1="198" y1="36.5" x2="241" y2="36.5" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="240.5,36 240.5,58.5 233,58.5 226.421,65.04 233.921,72.5 
		240.5,72.5 240.5,92 	" />
            <polyline fill="none" stroke="#FFFFFF" class="shape" stroke-miterlimit="10" points="277,29.5 269.5,29.5 269.5,15.5 261.5,15.5 261.5,36.5 
		270.5,36.5 270.5,44.5 263,44.5 	" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" x1="161.5" y1="55" x2="161.5" y2="81" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" x1="180" y1="87.5" x2="161.5" y2="54.625" />
            <line fill="none" stroke="#FFFFFF" class="shape" stroke-linejoin="bevel" stroke-miterlimit="10" x1="187" y1="87.5" x2="180" y2="87.5" />
        </g>
    </svg>

</div>