编程 Javascript
SVG描边动画

Posted in Javascript onFebruary 23, 2017
效果如下：
SVG描边动画
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>nubia</title>
 <style>
 .nubia_logo{
 position: absolute;
 opacity: 0;
 animation:fadeIn 2s ease-in forwards;
  -webkit-animation:fadeIn 2s ease-in forwards;
 top: 50%;
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 left: 50%;
 margin-left: -500px;
 }
 #nubia{
 position: absolute;
 z-index: 1;
 stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
 animation: describe 4s forwards;
  -webkit-animation: describe 4s forwards;
 top: 50%;
 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 left: 50%;
 margin-left: -500px;
 }
 @keyframes fadeIn{
 from{opacity: 0;}
 80%{opacity: 0.5;}
 to{opacity:1;}
 }
 @-webkit-keyframes fadeIn{
 from{opacity: 0;}
 80%{opacity: 0.5;}
 to{opacity:1;}
 }
 @keyframes describe{
 from{
  stroke-dashoffset: 2000;
  opacity: 1;
 }
 to{
  stroke-dashoffset: 0;
  opacity: 0;
 }
 }
 @-webkit-keyframes describe{
 from{
  stroke-dashoffset: 2000;
  opacity: 1;
 }
 to{
  stroke-dashoffset: 0;
  opacity: 0;
 }
 }
 </style>
</head>
<body style="background:#000;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="150px" viewBox="0 0 1000 149.452" enable-background="new 0 0 1000 149.452" xml:space="preserve" class="nubia_logo">
<g display="none">
 <path display="inline" fill="none" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path display="inline" fill="none" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path display="inline" fill="none" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path display="inline" fill="none" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h4.559
 c10.867,0,19.65-8.803,19.65-19.646V14.485H436.666z"/>
 <path display="inline" fill="none" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308
 V77.62c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path display="inline" fill="none" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014
C26.038,14.054,0.012,40.075,0,72.068v0.025v33.722v24.211v0.137h4.561c10.857,0,19.64-8.808,19.64-19.644v-4.575
 c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004
v33.707v4.704c0,10.836,8.783,19.644,19.633,19.644h4.571v-0.137v-24.211V72.093V72.068z"/>
 <path display="inline" fill="none" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <rect x="923.525" y="29.963" display="inline" fill="none" width="9.844" height="94.809"/>
 <rect x="954.039" y="29.963" display="inline" fill="none" width="9.842" height="94.844"/>
 <path display="inline" fill="none" d="M887.405,121.297v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718
 c6.727,0,7.438-2.774,7.438-6.954v-1.413H887.405z"/>
 <path display="inline" fill="none" d="M890.383,23.391v1.413c0,4.178,0.709,6.954,7.436,6.954h91.767
 c6.727,0,7.436-2.776,7.436-6.954v-1.413H890.383z"/>
 <path display="inline" fill="none" d="M779.799,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.846v91.107
c0,12.06,5.992,17.938,18.173,17.938h21.217c6.727,0,7.436-2.776,7.436-6.954v-1.413H779.799z"/>
 <path display="inline" fill="none" d="M726.388,84.789h-99.921v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h87.799
c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486v1.648c0,6.071,2.574,6.719,6.962,6.719h14.257
 c8.581,0,15.26-4.124,15.26-15.233V90.513C732.443,86.92,729.948,84.789,726.388,84.789"/>
 <rect x="766.47" y="51.675" display="inline" fill="none" width="42.276" height="8.366"/>
 <path display="inline" fill="none" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.844v91.107
c0,12.06,5.99,17.938,18.173,17.938h27.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path display="inline" fill="none" d="M825.511,51.676v8.367h34.633c6.725,0,7.436-2.778,7.436-6.956v-1.411H825.511z"/>
 <path display="inline" fill="none" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501
 l-2.547,6.702h-14.937v2.31c0,4.024,0.691,6.169,6.123,6.169h5.589l-1.392,3.664l-0.06,0.158
 c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798
 v8.179c10.204-1.956,19.207-5.739,26.816-10.266c10.106,5.364,20.913,8.672,24.958,9.817v-8.468
 c-4.592-1.303-10.905-3.585-17.049-6.671C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63
 c-0.219,0.175-0.445,0.341-0.668,0.514c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927
h22.507C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path display="inline" fill="none" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path display="inline" fill="none" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path display="inline" fill="none" d="M668.343,81.123c-6.71,19.725-21.335,34.142-43.318,40.216v8.323
 c25.027-4.971,45.74-23.612,52.974-48.538H668.343z"/>
 <path display="inline" fill="none" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411
 c-1.554,0-2.293,0.907-2.293,2.647v3.516c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481
 c9.157-2.031,17.557-5.564,24.633-9.754c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656
 C728.948,54.024,733.078,39.397,733.078,31.372 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h30.665
 C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
<g>
 <path fill="#E8380D" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path fill="#E8380D" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path fill="#727171" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path fill="#727171" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h4.559c10.867,0,19.65-8.803,19.65-19.646
 V14.485H436.666z"/>
 <path fill="#727171" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308V77.62
 c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path fill="#727171" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014C26.038,14.054,0.012,40.075,0,72.068v0.025
 v33.722v24.211v0.137h4.561c10.857,0,19.64-8.808,19.64-19.644v-4.575c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01
 c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004v33.707v4.704
 c0,10.836,8.783,19.644,19.633,19.644h4.571v-0.137v-24.211V72.093V72.068z"/>
 <path fill="#727171" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <rect x="923.525" y="29.963" fill="#727171" width="9.844" height="94.809"/>
 <rect x="954.039" y="29.963" fill="#727171" width="9.842" height="94.844"/>
 <path fill="#727171" d="M887.405,121.297v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718c6.727,0,7.438-2.774,7.438-6.954v-1.413
 H887.405z"/>
 <path fill="#727171" d="M890.383,23.391v1.413c0,4.178,0.709,6.954,7.436,6.954h91.767c6.727,0,7.436-2.776,7.436-6.954v-1.413
 H890.383z"/>
 <path fill="#727171" d="M779.799,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.846v91.107
c0,12.06,5.992,17.938,18.173,17.938h21.217c6.727,0,7.436-2.776,7.436-6.954v-1.413H779.799z"/>
 <path fill="#727171" d="M726.388,84.789h-99.921v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h87.799
c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486v1.648c0,6.071,2.574,6.719,6.962,6.719h14.257
 c8.581,0,15.26-4.124,15.26-15.233V90.513C732.443,86.92,729.948,84.789,726.388,84.789"/>
 <rect x="766.47" y="51.675" fill="#727171" width="42.276" height="8.366"/>
 <path fill="#727171" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V20.619h-9.844v91.107c0,12.06,5.99,17.938,18.173,17.938
 h27.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path fill="#727171" d="M825.511,51.676v8.367h34.633c6.725,0,7.436-2.778,7.436-6.956v-1.411H825.511z"/>
 <path fill="#727171" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501l-2.547,6.702h-14.937
 v2.31c0,4.024,0.691,6.169,6.123,6.169h5.589l-1.392,3.664l-0.06,0.158c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225
 c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798v8.179c10.204-1.956,19.207-5.739,26.816-10.266
 c10.106,5.364,20.913,8.672,24.958,9.817v-8.468c-4.592-1.303-10.905-3.585-17.049-6.671
 C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63c-0.219,0.175-0.445,0.341-0.668,0.514
 c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927h22.507
 C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path fill="#727171" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path fill="#727171" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path fill="#727171" d="M668.343,81.123c-6.71,19.725-21.335,34.142-43.318,40.216v8.323c25.027-4.971,45.74-23.612,52.974-48.538
 H668.343z"/>
 <path fill="#727171" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411c-1.554,0-2.293,0.907-2.293,2.647v3.516
 c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481c9.157-2.031,17.557-5.564,24.633-9.754
 c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656C728.948,54.024,733.078,39.397,733.078,31.372
 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h30.665C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
</svg>
<svg version="1.1" id="nubia" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="150px" viewBox="0 0 1000 149.452" enable-background="new 0 0 1000 149.452" xml:space="preserve">
<g>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M521.739,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S555.257,14.073,521.739,14.073 M521.739,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.963,16.581,36.963,36.964C558.702,95.243,542.13,111.824,521.739,111.824"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M596.591,135.378c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
 c0-7.773,6.3-14.074,14.074-14.074C590.291,121.304,596.591,127.605,596.591,135.378"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M289.83,14.074c0,7.774-6.3,14.074-14.074,14.074c-7.773,0-14.074-6.3-14.074-14.074
C261.682,6.3,267.983,0,275.756,0C283.53,0,289.83,6.3,289.83,14.074"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M436.666,14.485c-10.853,0-19.636,8.81-19.636,19.65v101.242h4.559c10.867,0,19.65-8.803,19.65-19.646V14.485
 H436.666z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M247.274,19.6c-10.857,0-19.642,8.799-19.642,19.638v4.376c0,0.104-0.013,0.204-0.013,0.308V77.62
 c0,18.645-15.17,33.818-33.818,33.818s-33.824-15.172-33.824-33.818V43.921c0-0.089-0.015-0.175-0.015-0.264v-4.419
 c0-10.838-8.778-19.638-19.631-19.638h-4.565v0.1v24.221v33.734v0.015c0,31.997,26.027,58.043,58.035,58.043
 c31.997,0,58.028-26.046,58.028-58.043V19.6H247.274z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M116.063,72.068c-0.013-31.993-26.034-58.014-58.022-58.014C26.038,14.054,0.012,40.075,0,72.068v0.025v33.722
 v24.211v0.137h4.561c10.857,0,19.64-8.808,19.64-19.644v-4.575c0-0.046,0.004-0.089,0.004-0.129V72.107h0.01
 c0-18.649,15.168-33.813,33.826-33.813c18.643,0,33.813,15.164,33.813,33.813h0.004v33.707v4.704
 c0,10.836,8.783,19.644,19.633,19.644h4.571v-0.137v-24.211V72.093V72.068z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M336.544,14.073c-33.516,0-60.796,27.274-60.796,60.79s27.28,60.792,60.796,60.792
 c33.518,0,60.787-27.276,60.787-60.792S370.062,14.073,336.544,14.073 M336.544,111.824c-20.38,0-36.951-16.581-36.951-36.961
 c0-20.383,16.571-36.964,36.951-36.964c20.391,0,36.964,16.581,36.964,36.964C373.507,95.243,356.935,111.824,336.544,111.824"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M963.88,121.297v-89.54h25.706c6.727,0,7.436-2.776,7.436-6.954v-1.413h-106.64v1.413
 c0,4.178,0.709,6.954,7.436,6.954h25.706v89.54h-36.12v1.413c0,4.18,0.709,6.954,7.438,6.954h97.718
 c6.727,0,7.438-2.774,7.438-6.954v-1.413H963.88z M933.369,31.757h20.67v89.54h-20.67V31.757z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M808.746,60.041v-8.366h-37.213V20.619h-9.846v91.107c0,12.06,5.992,17.938,18.173,17.938h21.217
 c6.727,0,7.437-2.776,7.437-6.954v-1.413h-28.714c-5.044,0-8.14-3.348-8.267-7.921V60.041H808.746z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M834.131,121.297c-5.044,0-8.14-3.348-8.267-7.921V60.043h34.28c6.725,0,7.436-2.778,7.436-6.956v-1.411
 h-41.716V20.619h-9.844v91.107c0,12.06,5.99,17.938,18.173,17.938h27.738c6.727,0,7.437-2.776,7.437-6.954v-1.413H834.131z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M678.658,31.37v-3.514c0-1.739-0.757-2.649-2.353-2.649h-26.843l2.547-6.702h-9.501l-2.547,6.702h-14.937v2.31
 c0,4.024,0.691,6.169,6.123,6.169h5.589l-1.392,3.664l-0.06,0.158c-3.042,8.959-3.774,12.803,2.595,20.959l0.189,0.225
 c2.083,2.347,4.64,4.505,7.449,6.475c-4.99,2.545-11.082,4.752-19.049,6.798v8.179c10.204-1.956,19.207-5.739,26.816-10.266
 c10.106,5.364,20.913,8.672,24.958,9.817v-8.468c-4.592-1.303-10.905-3.585-17.049-6.671
 C674.594,54.145,678.658,39.454,678.658,31.37 M654.191,59.63c-0.219,0.175-0.445,0.341-0.668,0.514
 c-3.396-2.251-6.425-3.487-8.658-6.213c-3.423-4.292-3.702-6.128-1.263-13.319l2.634-6.927h22.507
 C668.743,40.517,664.006,51.827,654.191,59.63"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M892.901,46.448l1.119-0.154c4.326-0.603,7.896,0.472,8.895,5.62l8.458,48.299
 c0.472,2.73-1.357,5.329-4.082,5.803l-3.893,0.676L892.901,46.448z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M994.504,46.448l-1.122-0.154c-4.324-0.603-7.894,0.472-8.893,5.62l-8.458,48.299
 c-0.472,2.73,1.357,5.329,4.082,5.803l3.893,0.676L994.504,46.448z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M726.388,84.789h-49.575c0.425-1.207,0.827-2.427,1.187-3.666h-9.656c-0.423,1.243-0.878,2.465-1.364,3.666
 h-40.512v8.464h8.344c0.06,0,0.116,0.006,0.177,0.006h27.798c-7.927,13.481-20.587,23.335-37.76,28.08v8.323
 c20.768-4.125,38.557-17.669,48.147-36.402h49.614c0.441,0,0.801,0.358,0.801,0.801v20.27c0,5.019,0,6.966-5.137,6.966h-22.486
v1.648c0,6.072,2.574,6.719,6.962,6.719h14.257c8.581,0,15.26-4.124,15.26-15.233V90.513
 C732.443,86.919,729.948,84.789,726.388,84.789z"/>
 <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M733.078,31.372v-3.516c0-1.739-0.737-2.647-2.291-2.647h-45.411c-1.554,0-2.293,0.907-2.293,2.647v3.516
 c0,8.025,4.355,22.819,17.201,33.231c-4.347,2.792-10.724,4.89-16.837,6.644v8.481c9.157-2.031,17.557-5.564,24.633-9.754
 c7.006,4.149,15.316,7.634,24.361,9.673V71.09c-6.013-1.744-12.06-3.905-16.34-6.656C728.948,54.024,733.078,39.397,733.078,31.372
 M708.08,60.018c-9.128-6.45-15.333-18.978-15.333-26.331h30.665C723.413,41.041,717.206,53.568,708.08,60.018"/>
</g>
</svg>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！
SVG描边动画
- Author -
sunny红
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Javascript 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
BootStrap表单控件之文本域textarea
May 23 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
JS多个异步请求按顺序执行next实现解析
Sep 16 Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 #Javascript
解析Vue2.0双向绑定实现原理
Feb 23 #Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 #Javascript