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

代码语言：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{
  animation: Paisaje 20s infinite linear;
  transform-origin: 400px 1000px;
}


@keyframes Paisaje{
  to{
    transform: rotate(-90deg);
  }
}
</style>




</head>

<body >
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" style="display: none;"> 
 <symbol id="Cuadro" viewBox="0 0 800 600">
  <polyline points="323.2,241.7 217.3,354.2 354.5,354.2 318.8,225.8 " stroke-linejoin="round" stroke-width="11"/>
  <polyline points="519.6,213.3 506,177.9 323.2,241.7 " stroke-width="16"/>
  <line x1="354.5" y1="354.2" x2="509" y2="185.7" stroke-width="16"/> 
 </symbol> 
  <path id="Cadena" d="M208,369.2c-5.9-2.5-10-8.3-10-15c0-9,7.3-16.3,16.3-16.3l139.2-1c11.9,0,21.5,9.6,21.5,21.5c0,10.5-7.5,19.2-17.5,21.1 l-158.1,29.3c-4.1,0.8-8.8-2.2-8.8-7.3c0-3,1.8-5.7,4.4-6.8l13.5-6.6C216.4,384.1,216.1,372.6,208,369.2z"/>
</svg>
  <!-- Visible -->  

<div class="Bicicletas">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" >
	<defs>
<g id="RuedaBike">    
<line id="Valvula" x1="150" y1="50" x2="150" y2="75" stroke="#333" stroke-width="4" />
<g id="Rayos" class="Rayo">
	<line x1="150" y1="145" x2="50" y2="140"  />
	<line x1="150" y1="155" x2="50" y2="160"  />
	<line x1="150" y1="145" x2="60" y2="115"  />	
	<line x1="150" y1="155" x2="60" y2="185"  />
</g>
	<use xlink:href="#Rayos" transform="rotate(60, 150, 150)" />
	<use xlink:href="#Rayos" transform="rotate(120, 150, 150)" />
	<use xlink:href="#Rayos" transform="rotate(180, 150, 150)" />
	<use xlink:href="#Rayos" transform="rotate(240, 150, 150)" />
	<use xlink:href="#Rayos" transform="rotate(300, 150, 150)" />	
<g id="Neumatico">
	<circle cx="150" cy="150" r="100" class="Llanta"/>
  <circle cx="150" cy="150" r="100" class="Tacos"/>
	<circle cx="150" cy="150" r="90" class="Rin"/>
<g id="Eje">
	<circle cx="150" cy="150" r="15" fill="#999"/>
	<circle cx="150" cy="150" r="5" />
</g> 
</g>
</g>  			
<g id="Bici">
<g id="Estrella" >
  <line id="Gajo" x1="350" y1="350" x2="370" y2="350" fill="none" />
  <use xlink:href="#Gajo" transform="rotate(60, 354, 359)" />
  <use xlink:href="#Gajo" transform="rotate(120, 354, 359)" />
  <use xlink:href="#Gajo" transform="rotate(180, 354, 359)" />
  <use xlink:href="#Gajo" transform="rotate(240, 354, 359)" />
  <use xlink:href="#Gajo" transform="rotate(300, 354, 359)" />
  <circle cx="354" cy="359" r="18.5" fill="none"  />
</g>
<g id="RuedaTrasera">
  <use xlink:href="#RuedaBike" width="300" height="300" x="64.28" y="204"  />
  <circle cx="214.28" cy="354" r="25" class="Dientes" stroke="#666" fill="#666"  />
  <circle cx="214.28" cy="354" r="21" class="Dientes" stroke="#999" fill="#999"  />
  <circle cx="214.28" cy="354" r="17" class="Dientes" stroke="#666" fill="#666"  />
</g>
<g id="RuedaDelantera">
  <use xlink:href="#RuedaBike" width="300" height="300" x="435.7" y="204"  />
  <use xlink:href="#Estrella" x="114.5" y="-75.5" transform="scale(1.25)" stroke="#999" stroke-width="3.5"/> 
</g>
<g id="EstrellaCompleta">
 	<use xlink:href="#Estrella" stroke="#666" stroke-width="4"/>
  	<circle cx="354" cy="359" r="20" class="Dientes" stroke="#666" fill="none"  />
  	<circle cx="354" cy="359" r="8"/> 
</g>	
<g id="gAnterior">  
  <g class="Componentes">
    <g id="Cables" stroke-width="2">
      <path d="M548,257c0-24,1-93-40-108"/>
      <path d="M514,151c21-2.8,25,14-6,42"/>
      <path d="M509,195c18-8,37.8-34,7-43"/>
    </g>
    <polygon id="Asiento" points="337.7,141.5 254.7,141.5 280,151.2 " stroke-width="7" fill="black"/>
    <line id="EspigaAsiento" x1="318.8" y1="225.8" x2="297.2" y2.........完整代码请登录后点击上方下载按钮下载查看