css+svg实现自行车骑行动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现自行车骑行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background: lightgreen; } svg { width: 75%; } .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: red; } .CuadroI { fill: none; stroke: blue; } .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; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" style="display: none;"> <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> </svg> <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&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0