gsap+svg实现骑行中的自行车动画效果代码-html代码-BFW代码库

gsap+svg实现骑行中的自行车动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现骑行中的自行车动画效果代码岩灯动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width:80%;
  height:80%;  
  max-width:600px;
  overflow:visible;
}
</style>


</head>

<body  >
  <svg viewBox="0 0 510 510">
  <path stroke="#00000010" stroke-width="12" stroke-linecap="round" d="M26,447 L477,447" />
  <path id="road" stroke="#ffffff30" stroke-width="4" stroke-linecap="round" d="M28,447 L475,447" stroke-dasharray="35 55" />
  
  <g class="crank">
    <path stroke="#9D9FA2" stroke-width="6" d="M225,368 L265,368"/>
    <path class="pedal" stroke="#000" stroke-width="8" d="M255,368 L275,368"/>    
  </g>
  <g id="wheel">
                <path id="spokes" fill="none" stroke="#9D9FA2" stroke-width="3" d="M399.8,250v192.4 M496,346.2H303.6.........完整代码请登录后点击上方下载按钮下载查看