编程 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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
div移动输入框不能输入的问题
Nov 19 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 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