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:3px; stroke-dasharray:4px 4px; stroke-linecap:round;}
.CadenaC{stroke:#666; stroke-width:2px; stroke-dasharray:0px 4px; stroke-linecap:round; animation: CorreCadena 1s infinite linear ;}
@keyframes CorreCadena{
  to{
    stroke-dasharray:4px 4px;
  }
}
.Dientes{ stroke-width:5px; stroke-dasharray:1.5px;}

.PrimerPlano{
  transform: rotate(-67deg);
  animation: Rodada 8s infinite linear;
transform-origin: 400px 1000px;}

@keyframes Rodada{
  to{
    transform: rotate(67deg);
  }
}

#Terreno{
  stroke:#FC0; stroke-width:6px; stroke-dasharray:0px 9.17px ; stroke-linecap:round;
  animation: Recorrido 2s infinite linear;
  transform-origin: 400px 1000px;
}
@keyframes Recorrido{
  to{
    transform: rotate(-15deg);
  }
}

.SegundoPlano{
  transform: rotate(-57deg);
  animation: Rodadaaa 12s infinite linear;
transform-origin: 400px 1000px;}

@keyframes Rodadaaa{
  to{
    transform: rotate(57deg);
  }
}

.Cielo{
  animation: Paisaje 30s infinite linear;
  transform-origin: 400px 1000px;
}
.Lejania{
  animation: Paisaje 60s infinite linear;
  transform-origin: 400px 1000px;
}

.Cactuses{
  anima.........完整代码请登录后点击上方下载按钮下载查看