编程 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兼容标准的表格变色效果
Jun 28 Javascript
javascript jQuery插件练习
Dec 24 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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