css实现自动车行驶动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现自动车行驶动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .bicycle-container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 350px; height: 300px; overflow: hidden; } .bicycle-container .wheel { position: absolute; margin: auto; top: 0; bottom: 0; width: 120px; height: 120px; box-shadow: 0 10px 15px -12px rgba(0, 0, 0, 0.3); } .bicycle-container .wheel .tire { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; border: 10px solid #151515; z-index: 2; } .bicycle-container .wheel .rim { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 114px; height: 114px; border-radius: 50%; border: 10px solid crimson; z-index: 1; } .bicycle-container .wheel .spokes { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 78px; height: 78px; border-radius: 50%; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid crimson; z-index: 1; animation: rt 2s infinite linear; background: rgba(200, 100, 100, 0.1); } .bicycle-container .wheel .spokes:nth-of-type(3) { border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 3px solid crimson; } .bicycle-container .wheel .hub { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: crimson; } .bicycle-container .back-wheel { left: 0; } .bicycle-container .front-wheel { right: 0; } .bicycle-container .gear { position: absolute; margin: auto; top: 0; bottom: 0; left: calc(120px + 39.6px); width: 36px; height: 36px; border-radius: 50%; background: #151515; z-index: 4; animation: rt 3s infinite linear; } .bicycle-container .gear .gear-red { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; border: 3px solid crimson; } .bicycle-container .gear .pedal-tube { position: absolute; margin: auto; top: -30px; right: 0; bottom: 0; left: 0; transform: rotate(-90deg); width: 20px; } .bicycle-container .gear .pedal { position: absolute; margin: auto; top: -50px; right: 0; bottom: 0; left: 0; width: 20px; height: 5px; background: crimson; border-radius: 5px; z-index: 3; } .bicycle-container .tube { position: absolute; margin: auto; top: 0; bottom: 0; height: 5px; border-radius: 5px; background: #151515; z-index: 3; } .bicycle-container .chain-tube { left: calc(120px / 2); width: 120px; } .bicycle-container .seat-tube-back { left: calc(120px / 2); transform-origin: left; transform: rotate(-60deg); width: 120px; } .bicycle-container .seat-tube-front { left: calc(120px / 2); transform-origin: right; transform: rotate(60deg); width: 120px; } .bicycle-container .seat-tube-post { left: calc((120px / 2) - 20px); transform-origin: right; transform: rotate(60deg); background: crimson; z-index: 1; height: calc(5px - 1px); width: 140px; } .bicycle-container .top-tube { left: 120px; bottom: initial; top: 44px; width: 113px; } .bicycle-container .top-handlebar-tube { right: 112px; bottom: initial; top: 25px; width: 20px; background: crimson; } .bicycle-container .top-handlebar-tube2 { right: 90px; bottom: initial; top: 25px; width: 25px; background: #151515; border-radius: 0%; } .bicycle-container .down-tube { left: calc(120px + 60px); width: 100px; transform-origin: left; transform: rotate(-50deg); } .bicycle-container .head-tube { right: calc(120px / 2); transform-origin: right; transform: rotate(60deg); width: 120px; } .bicycle-container .head-tube-post { right: calc(120px / 2); transform-origin: right; transform: rotate(60deg); width: 140px; background: crimson; z-index: 1; height: calc(5px - 1px); } .bicycle-container .saddle { position: absolute; margin: auto; top: 20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0