svg+spirit实现射箭动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+spirit实现射箭动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #F9E3B1;
}

svg {
  display: block;
  width: auto;
  height: 90vh;
  margin: 0 auto;
}
</style>

 

</head>

<body  >
  <svg viewBox="0 0 1836 1514">
  <rect style="fill:#F9E3B1;" width="1836" height="1514" />
  <line style="fill:none;stroke:#282828;stroke-width:22;stroke-linecap:round;stroke-miterlimit:10;" x1="902.094" y1="974.078" x2="933.592" y2="1143.565" />
  <path id="arm-left" style="fill:none;stroke:#282828;stroke-width:23;stroke-linecap:round;stroke-miterlimit:10;" d="
    M992.089,821.086c0,0,133.493,29.998,275.986-133.493" />
  <path style="fill:#37B1BC;" d="M557.41,695.625c-1.437,15.111-2.457,24.666-3.079,35.684c-0.622,32.637-0.846,10.553-0.689,33.12
    c0.156,6.937,0.693,19.95,1.591,30.634c0.898,5.791,2.159,28.592,3.763,28.227c1.604,4.874,3.552,18.05,5.825,25.898
    c2.273,32.227,4.872,23.587,7.778,23.649c2.906,27.982,6.119,24.541,9.622,21.477c3.502,1.703,7.294,12.914,11.356,19.384
    c4.062,17.372,8.396,10.541,12.982,17.369c4.586,4.178,9.425,19.397,14.498,15.433c5.073-5.487,10.381,1.483,15.905,13.576
    c2.762-2.541,5.578-3.807,8.446-2.33s5.788,5.697,8.757,14.126c2.969,0.976,5.988,8.544,9.054,9.986
    c3.066,2.709,6.179,0.701,9.338,0.111c3.158,7.421,6.362,8.123,9.607,8.84c3.246-1.208,6.535-3.993,9.864-0.366
    c3.329,6.638,6.699,7.535,10.106,4.605c3.408-8.441,6.853-1.254,10.335,2.326c3.482,6.669,6.999,3.455,10.551,3.101
    c3.551,7.017,7.136,7.69,10.753,2.365c5.786,1.818,11.652,8.492,17.589,3.371c5.937-3.738,11.945-2.81,18.014,2.523
    c6.069,11.182,12.2,7.311,18.383,1.716c6.183-1.903,12.419-14.005,18.697,0.95c6.278,2.862,12.6,3.835,18.956,0.222
    c8.78-2.844,17.431,9.561,25.939-1.323c8.508-2.197,16.874-3.913,25.086-3.549c8.211-8.261,16.268-5.213,24.158-5.669
    c7.89,8.131,15.613-7.464,23.157-7.683c7.544,3.681,14.908-5.452,22.082-9.591c7.173,7.296,14.155-7.638,20.932-11.393
    c6.778-12.674,13.352-10.932,19.709-13.09c6.358-3.324,12.499-3.761,18.412-14.681c5.913-13.601,11.598-6.601,17.041-16.166
    c5.444,4.868,10.647-7.595,15.597-17.545c4.95-3.034,9.646-1.32,14.078-18.818c4.431-4.953,8.597-10.06,12.485-19.985
    c3.888-20.071,7.498-27.878,10.818-21.047c3.32-9.502,6.35,8.579,9.078-22.003c2.728-11.791,5.153-21.66,7.263-22.853
    c2.11-21.801,3.906-20.748,5.375-23.598c1.469-13.23,2.61-0.578,3.412-24.236c0.802,6.915,1.265-15.927,1.376-24.771
    c0.107-8.326-0.067-37.826-0.516-23.972c-0.45,6.588-1.174-28.563-2.169-23.644c-0.995-6.743-2.259-9.986-3.786-23.23
    c-1.528-12.118-3.319-25.779-5.369-22.729c-2.049,5.471-4.357-3.41-6.916-22.141c-2.559-15.531-5.371-5.953-8.428-21.466
    c-3.057-2.892-6.361-23.76-9.905-20.705c-3.544-25.482-7.328-11.981-11.347-19.857c-4.019-19.365-8.272-18.483-12.755-18.922
    c-4.482,0.255-9.193-27.913-14.126-17.9c-4.934,0.104-10.09-8.603-15.463-16.792c-5.373-16.137-10.964-2.651-16.765-15.597
    c-5.802-25.173-11.814,4.43-18.032-14.316c-6.218,4.814-12.641-11.176-19.264-12.948c-3.434-5.347-6.922-13.943-10.462-6.146
    c5.724-1.945,10.955,1.931,15.331-10.259c4.376-15.716,7.898-9.519,10.204-16.093c2.306-5.954,3.397-12.306,2.911-18.482
    C974.062,402.25,972,396.25,968,391c2.25,5.75,3.25,11.75,3.094,17.625c-0.156,5.875-1.469,11.625-3.844,16.875
    c-2.375,3.077-5.812,6.272-10.219,13.875c-4.406,1.64-9.781,6.875-16.031,8.625c-6,2-12,3-18,2c-5-1-10-2-14-4
    c-3-1.5-5.5-3.5-7.942-5.536s-4.826-4.107-7.593-5.749c-3.092-11.967-5.069-2.988-7.373-6.826c-5.6,2.777-11.291,1.059-17.072-4.59
    c-5.781-9.403-11.652-5.544-17.612-3.675c-8.211-0.628-16.328-19.535-24.342-2.803c-8.014,6.157-15.925-5.711-23.721,0.295
    c-7.796-6.177-15.478-8.611-23.035,3.186c-7.557,0.775-14.989,10.265-22.286,5.87c-7.296-12.077-14.457-6.976-21.472,8.347
    c-7.014,9.924-13.882-4.572-20.593,10.617c-6.711,7.04-13.265-0.568-19.651,12.681c-6.386,10.499-12.604,23.2-18.644,14.537
    c-6.04,13.824-11.901,20.316-17.573,16.187c-5.672,11.623-11.155,17.874-16.437,17.63c-5.283-17.274-10.366,22.851-15.238,18.866
    c-4.872,31.806-9.534,9.913-13.974,19.894c-4.44-2.278-8.659,8.67-12.646,20.716c-3.987,15.492-7.742,7.757-11.254,21.332
    c-3.512,13.523-6.781,12.893-9.797,21.74c-3.016,11.391-5.778,19.021-8.276,21.941c-2.498,2.008-4.732,6.589-6.691,21.935
    c-1.959,22.427-3.643-3.039-5.042,21.723C559.34,682.391,558.227,696.752,557.41,695.625z" />
    <path id="rope" data-spirit-id="rope" fill="none" stroke="#F9F9F9" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M1098.6,426.6
    c12.1,160.4,2.1,320.4,12,540" />
  <g id="bow">
    <path fill="#D95141" d="M1100.293,414.005c0,0,0.685,0.001,2.013,0.003c0.664,0.001,1.488,0.002,2.468,0.004
      c0.49,0.001,1.019,0.002,1.585,0.002c0.574,0.005,1.302,0.08,2.013,0.123c1.452,0.109,3.074,0.232,4.859,0.366
      c0.918,0.049,1.762,0.209,2.693,0.33c0.922,0.131,1.882,0.268,2.879,0.41c0.993,0.156,2.043,0.263,3.097,0.479
      c1.054,0.218,2.144,0.444,3.268,0.677c1.125,0.241,2.285,0.49,3.48,0.746c1.18,0.296,2.378,0.647,3.62,0.984
      c9.915,2.709,21.607,7.157,33.978,14.093c12.418,6.844,25.395,16.29,37.983,28.204c0.792,0.741,1.587,1.485,2.387,2.233
      c0.794,0.754,1.537,1.561,2.314,2.346c1.539,1.585,3.093,3.185,4.662,4.801c1.575,1.613,3.015,3.364,4.55,5.066
      c0.758,0.86,1.519,1.723,2.283,2.59c0.77,0.864,1.537,1.736,2.249,2.655c2.882,3.651,5.974,7.264,8.69,11.222
      c1.402,1.951,2.814,3.917,4.237,5.897c1.331,2.038,2.671,4.091,4.02,6.158c2.779,4.093,5.199,8.462,7.782,12.818
      c1.326,2.162,2.439,4.444,3.651,6.697c1.189,2.265,2.385,4.542,3.587,6.833c1.101,2.336,2.207,4.684,3.319,7.045
      c1.102,2.365,2.274,4.72,3.226,7.172c1.97,4.876,4.142,9.744,5.865,14.806c7.373,20.091,13.053,41.486,16.744,63.496
      c3.695,22.012,5..........完整代码请登录后点击上方下载按钮下载查看