css实现三维卡车行驶动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维卡车行驶动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #fff; height: 100vh; overflow: hidden; display: flex; font-family: "Anton", sans-serif; justify-content: center; align-items: center; perspective: 1000px; } div { position: absolute; transform-style: preserve-3d; background: linear-gradient(45deg, #938d7f 0%, #c5bfb1 100%); box-sizing: border-box; will-change: transform; } .window { background: rgba(0, 100, 255, 0.3); } #truck { -webkit-animation: drive 10000ms linear infinite; animation: drive 10000ms linear infinite; } #truck .body { width: 100px; transform: translate(200px, -100px) translateZ(100px); } #truck .shadow { width: 160px; height: 210px; background: #aaaaaa; transform-origin: 50% 100%; transform: translate(-30px, -130px) translateZ(20px) rotateX(90deg); filter: blur(0px); box-shadow: 0 0 35px 25px white inset; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #truck .cockpit { -webkit-animation: bounce 600ms ease-out infinite alternate; animation: bounce 600ms ease-out infinite alternate; } #truck .cockpit .front { width: 100px; height: 50px; } #truck .cockpit .back { width: 100px; height: 75px; transform: translate(0, -50px) translateZ(-50px); } #truck .cockpit .top { width: 100px; height: 25px; transform-origin: 50% 100%; transform: translate(0, -75px) translateZ(-25px) rotateX(90deg); } #truck .cockpit .bottom { width: 100px; height: 50px; transform-origin: 50% 100%; transform: translate(0, -25px) rotateX(90deg); } #truck .cockpit .left { width: 50px; height: 100px; transform-origin: 0 0; transform: translate(100px, -50px) rotateY(90deg); -webkit-clip-path: polygon(0% 50%, 50% 50%, 50% 0%, 100% 0%, 100% 75%, 60% 75%, 40% 100%, 0% 100%); clip-path: polygon(0% 50%, 50% 50%, 50% 0%, 100% 0%, 100% 75%, 60% 75%, 40% 100%, 0% 100%); } #truck .cockpit .right { width: 50px; height: 100px; transform-origin: 100% 0; transform: translate(-50px, -50px) rotateY(-90deg); -webkit-clip-path: polygon(101% 50%, 50% 50%, 50% 0%, 0% 0%, 0% 75%, 40% 75%, 60% 100%, 101% 100%); clip-path: polygon(101% 50%, 50% 50%, 50% 0%, 0% 0%, 0% 75%, 40% 75%, 60% 100%, 101% 100%); } #truck .cockpit .left_headlight { width: 25px; height: 10px; background: #faa3e9; border-radius: 3px; transform: translate(5px, 20px) translateZ(1px); } #truck .cockpit .right_headlight { width: 25px; height: 10px; background: #faa3e9; border-radius: 3px; transform: translate(70px, 20px) translateZ(1px); } #truck .cockpit .left_window { width: 25px; height: 50px; transform-origin: 0 0; transform: translate(100px, -50px) rotateY(90deg); -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%); clip-path: polygon(0% 100%, 100% 0%, 100% 100%); } #truck .cockpit .right_window { width: 25px; height: 50px; transform-origin: 100% 0; transform: translate(-25px, -50px) rotateY(-90deg); -webkit-clip-path: polygon(100% 100%, 0% 0%, 0% 100%); clip-path: polygon(100% 100%, 0% 0%, 0% 100%); } #truck .cockpit .front_window { width: 100px; height: 50px; transform-origin: 50% 100%; transform: translate(0, -50px) rotateX(26deg) scaleY(1.12); } #truck .cockpit .front_window::before { content: ""; position: absolute; width: 5px; height: 100%; background: linear-gradient(45deg, #938d7f 0%, #c5bfb1 100%); } #truck .cockpit .front_window::after { content: ""; position: absolute; right: 0; width: 5px; height: 100%; background: linear-gradient(45deg, #938d7f 0%, #c5bfb1 100%); } #truck .cockpit .handle { width: 30px; height: 30px; border-radius: 100%; background: none; border: 5px solid #938d7f; transform: translate(10px, -10px) translateZ(-10px) rotateX(-20deg); } #truck .cockpit .left_seat_back { width: 30px; height: 50px; background: dimgray; transform-origin: 50% 100%; transform: translate(60px, -30px) translateZ(-40px) rotateX(10deg); border-radius: 5px 5px 0 0; } #truck .cockpit .left_seat_bottom { width: 30px; height: 20px; background: dimgray; transform-origin: 50% 100%; transform: translate(60px, 0px) translateZ(-20px) rotateX(90deg); } #truck .cockpit .right_seat_back { width: 30px; height: 50px; background: dimgray; transform-origin: 50% 100%; transform: translate(10px, -30px) translateZ(-40px) rotateX(10deg); border-radius: 5px 5px 0 0; } #truck .cockpit .right_seat_bottom { width: 30px; height: 20px; background: dimgray; transform-origin: 50% 100%; transform: translate(10p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0