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

代码语言: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.54.........完整代码请登录后点击上方下载按钮下载查看

网友评论0