css布局实现电动三轮车嘟嘟车行驶在都市路上动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现电动三轮车嘟嘟车行驶在都市路上动画效果代码
代码标签: 电动 三轮车 嘟嘟 车 行驶 在 都市 路上 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; } body { background-color: #f8fbff; display: grid; place-content: center; height: 100vh; margin: 0; } .bg { background-color: #f8fbff; background-image: url("//repo.bfw.wiki/bfwrepo/image/60a2ff042098f.png"); background-position-y: center; background-attachment: fixed; background-repeat: repeat-x; background-position-x: -10%; animation: bg linear 20s infinite; } .tuk { width: 700px; height: 428px; z-index: 5; position: relative; margin-left: -20px; } .body { width: 595px; height: 374px; background: #262523; border-radius: 80px 150px 180px 60px; position: relative; } .body .empty-space { width: 270px; height: calc(100% - 40px); margin-top: 20px; background-color: #f8fbff; position: absolute; right: 140px; z-index: 1; border-radius: 30px 10px 10px; } .body .empty-space .seperator { height: 100%; width: 8px; background: #bbbbbe; right: 125px; position: absolute; } .body .empty-space .seperator .seat-base { background: #c80f1f; width: 20px; border-radius: 4px 4px 0 0; height: 140px; bottom: 0; left: -5px; position: absolute; } .body .empty-space .seperator .seat-base::after { content: ""; width: 10px; height: 82px; position: absolute; background: #c80f1f; bottom: 0; left: 20px; border-radius: 0 2px 0 0; } .body .empty-space .seperator .seat-base .seat { background: #262523; width: 60px; height: 15px; border-radius: 0 10px 10px 0; position: absolute; top: 40px; left: 20px; } .body .empty-space .seperator .seat-base .seat::before { content: ""; position: absolute; width: 8px; height: 40px; background: #262523; border-radius: 10px; top: -90px; left: -8px; } .body .empty-space .cover { width: 140px; height: 137px; background: #c80f1f; position: absolute; bottom: 0; } .body .empty-space .cover .sheet { width: 100%; height: 125px; background: #262523; border-radius: 2px 2px 20px 60px; z-index: 100; position: absolute; top: 10px; } .body .empty-space .cover .sheet .sheet-bars { display: flex; flex-direction: column; transform: scaleX(-1); gap: 18px; padding: 12px 12px; margin: 0; } .body .empty-space .cover .sheet .sheet-bars > li { width: 100%; height: 5px; border-radius: 10px; list-style: none; background: #3d3c39; } .body .empty-space .cover .sheet .sheet-bars > li:nth-child(4) { width: 90%; } .body .empty-space .cover .sheet .sheet-bars > li:nth-child(5) { width: 70%; } .body .base { height: 156px; width: 100%; background: #c80f1f; position: absolute; bottom: 0; border-radius: 0 0 150px 60px; } .body .base .back-bars { margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .body .base .back-bars > li { list-style: none; margin: 0; width: 160px; height: 7px; border-radius: 10pxa; background-color: #e01123; } .body .windscreen { width: 110px; height: 180px; margin-top: 24px; position: absolute; right: 15px; border-radius: 0 90% 10px 8px; overflow: hidden; } .body .windscreen .screen { position: absolute; width: 120px; height: 200px; background-color: rgba(197, 239, 239, 0.65); } .body .windscreen::before { content: ""; width: 40px; height: 200px; left: 10px; top: 10px; background: rgba(255, 255, 255, 0.3); position: absolute; transform: rotate(30deg); } .body .windscreen::after { content: ""; width: 20px; height: 200px; left: 0; top: -40px; background: rgba(255, 255, 255, 0.3); position: absolute; transform: rotate(30deg); } .body .head-light { width: 40px; height: 20px; border-radius: 4px; position: absolute; right: -2px; bottom: 120px; z-index: 2; background: #262523; } .body .head-light::before { content: ""; width: 27px; height: 13px; border-radius: 2px; position: absolute; top: -12px; right: 2px; background: #f48516; animation: signal 600ms ease infinite; z-index: 4; } .body .head-light::after { content: ""; background: #262523; width: 100%; height: 20px; bottom: -10px; position: absolute; border-radius: 4px; transform: skewY(10deg); } .body .back-light, .body .back-light::before { width: 8px; height: 10px; border-radius: 10px 0 0 10px; background-color: #e80723; position: absolute; bottom: 100px; left: -8px; z-index: 2; } .body .back-light::before { content: ""; left: 0; background: #f48516; animation: signal 400ms ease infinite; bottom: 18px; } .body .wheel-wrap { position: absolute; } .body .wheel-wrap.left { bottom: -55px; left: 45px; } .body .wheel-wrap.right { bottom: -55px; right: -45px; } .body .wheel-wrap.right::before { background: #bbbbbe; width: 12px; height: 55px; z-index: 4; top: 15px; left: 40px; transform: rotate(-40deg); border-radius: 10px; } .body .wheel-wrap.right .wheel::before { width: 124px; height: 120px; left: -28px; top: -75px; transform: rotate(-17deg); clip-path: circle(50% at 50% 112%); } .body .wheel-wrap.right .wheel::after { width: 120px; height: 120px; left: -25px; top: -75px; transform: rotate(-17deg); clip-path: circle(50% at 50% 112%); z-index: 6; } .body .wheel-wrap::before { content: ""; position: absolute; border-radius: 20px 20px 0 0; width: 120px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0