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

svg实现自行车骑行动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现自行车骑行动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body{margin: 0; background:brown;}	
svg{width: 100vw; }
.Bicicletas{display:flex; height: 100vh; width: 100vw; align-items: center; justify-content: center;}
.Rayo{fill:none; stroke:#666; stroke-width:1; stroke-linecap:round;}
.Metal{fill:#666;}
.Llanta{fill:none; stroke:#000; stroke-width:14; stroke-linecap:round;}
.Rin{fill:none; stroke:#666; stroke-width:8; stroke-linecap:round;}
.PalaPedal{fill:none; stroke:#999; stroke-width:7; stroke-linecap:round;}
.Pedal{fill:none; stroke:#000; stroke-width:7;}
.Tacos{fill:none; stroke:#000; stroke-width:18; stroke-dasharray:11.22;}
.Cuadro{fill:none; stroke:purple; }
.CuadroI{fill:none; stroke:#FC0; }
.CuadroII{fill:none; stroke:green; }
.Componentes{fill:none; stroke:black; stroke-linejoin:round;}
.Pedaleo{animation: Girando 3s infinite linear;
transform-origin: 354px 359px}
.PedalD{animation: GirandoBack 3s infinite linear;
transform-origin: 354px 409px}
.PedalI{animation: GirandoBack 3s infinite linear;
transform-origin: 354px 309px}
@keyframes GirandoBack{
  to{
    transform: rotate(-360deg);
  }
}
.Estrellita{transform-origin: 198px 401px; animation: Girando 2s infinite linear;}
.Rodando{animation: Girando 4s infinite linear;}
.Delantera{transform-origin: 585.71px 354.18px;}
.Trasera{transform-origin: 214.28px 354.18px;}
@keyframes Girando{
  to{
    transform: rotate(360deg);
  }
}

#Cadena{fill:none;}
.CadenaA{stroke:#333; stroke-width:4px; stroke-dasharray:0px 4px; stroke-linecap:round; animation: CorreCadena 0.5s infinite linear ;}
.CadenaB{stroke:#333; stroke-width.........完整代码请登录后点击上方下载按钮下载查看