编程 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工具_Form 封装
Aug 21 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
js实现筛选功能
Nov 24 Javascript
如何利用js在两个html窗口间通信
Apr 27 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