css+gsap实现三维警车巡逻动画效果代码
代码语言:html
所属分类:动画
代码描述:css+gsap实现三维警车巡逻动画效果代码,带声音
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .cuboid { width: 100%; height: 100%; position: relative; } .cuboid__side:nth-of-type(1) { height: calc(var(--thickness) * 1vmin); width: 100%; position: absolute; top: 0; transform: translate(0, -50%) rotateX(90deg); } .cuboid__side:nth-of-type(2) { height: 100%; width: calc(var(--thickness) * 1vmin); position: absolute; top: 50%; right: 0; transform: translate(50%, -50%) rotateY(90deg); } .cuboid__side:nth-of-type(3) { width: 100%; height: calc(var(--thickness) * 1vmin); position: absolute; bottom: 0; transform: translate(0%, 50%) rotateX(90deg); } .cuboid__side:nth-of-type(4) { height: 100%; width: calc(var(--thickness) * 1vmin); position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%) rotateY(90deg); } .cuboid__side:nth-of-type(5) { height: 100%; width: 100%; transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin)); position: absolute; top: 0; left: 0; } .cuboid__side:nth-of-type(6) { height: 100%; width: 100%; transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg); position: absolute; top: 0; left: 0; } *, *:after, *:before { box-sizing: border-box; transform-style: preserve-3d; transition: background 0.1s ease; } body { min-height: 100vh; display: grid; background: var(--bg); place-items: center; touch-action: none; } :root { --base-size: 1vmin; --base-height: calc(45 * 0.65); --base-width: calc(75 * 0.65); --speed: 0.4s; --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%)); --width: calc(var(--base-width) * var(--base-size)); --height: calc(var(--base-height) * var(--base-size)); --road-one: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%)); --road-two: hsl(0, 0%, calc((30 + (var(--on, 0) * 35)) * 1%)); --road-three: hsl(0, 0%, calc((20 + (var(--on, 0) * 35)) * 1%)); --road-four: hsl(0, 0%, calc((10 + (var(--on, 0) * 35)) * 1%)); --road-marking-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 15)) * 1%)); --road-marking-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 15)) * 1%)); --road-marking-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 15)) * 1%)); --white-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 10)) * 1%)); --white-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%)); --white-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%)); --white-four: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%)); --glass-one: hsl(210, 80%, calc((85 + (var(--on, 0) * 10)) * 1%)); --glass-two: hsl(210, 80%, calc((80 + (var(--on, 0) * 10)) * 1%)); --glass-three: hsl(210, 80%, calc((75 + (var(--on, 0) * 10)) * 1%)); --glass-four: hsl(210, 80%, calc((70 + (var(--on, 0) * 10)) * 1%)); --bumper-one: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%)); --bumper-two: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%)); --bumper-three: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%)); --bumper-four: hsl(0, 0%, calc((65 + (var(--on, 0) * 10)) * 1%)); --wheel-one: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%)); --wheel-two: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%)); --wheel-three: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%)); --wheel-four: hsl(0, 0%, calc((0 + (var(--on, 0) * 10)) * 1%)); --white-four: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%)); --black-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 10)) * 1%)); --black-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%)); --black-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%)); --black-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%)); --hub: hsl(0, 0%, calc((65 + (var(--on, 0) * 25)) * 1%)); --glare: rgba(255,255,255,0.25); --siren-red: rgba(242,32,13,0.25); --siren-blue: rgba(13,147,242,0.25); --lamp: hsl(45, 90%, 90%, calc(0.75 - calc(var(--on, 0) * 0.75))); --headlight: hsl(45, 90%, 100%, calc(1 - calc(var(--on, 0) * 0.5))); --indicator: hsl(35, 90%, 50%, calc(1 - calc(var(--on, 0) * 0.5))); --taillight: hsl(0, 90%, 50%, calc(1 - calc(var(--on, 0) * 0.5))); --shift: calc(var(--height) * 0.1); --bob: calc(var(--width) * 0.08); --bob-speed: 2s; --shift-speed: 5s; } .scene { position: fixed; height: var(--height); width: var(--width); top: 50%; left: 50%; transform: translate3d(-50%, -50%, 100vmin); transform: translate3d(-50%, -65%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg)); } .road { position: absolute; bottom: 0; width: 100%; height: 20%; transform: translate3d(0, 1px, 0); } .car { position: absolute; height: 100%; width: 100%; -webkit-animation: bob var(--bob-speed) infinite linear alternate; animation: bob var(--bob-speed) infinite linear alternate; } .car__bob { position: absolute; left: 50%; bottom: 20%; height: 50%; width: 50%; transform: translate3d(-50%, 0%, 0vmin); -webkit-animation: shift var(--shift-speed) infinite linear alternate; animation: shift var(--shift-speed) infinite linear alternate; } @-webkit-keyframes shift { 0% { transform: translate3d(-50%, 0%, calc(var(--shift) * -1)); } 100% { transform: translate3d(-50%, 0%, calc(var(--shift) * 1)); } } @keyframes shift { 0% { transform: translate3d(-50%, 0%, calc(var(--shift) * -1)); } 100% { transform: translate3d(-50%, 0%, calc(var(--shift) * 1)); } } .car > * { position: absolute; } .car__shadow { width: 100%; height: calc(var(--height) * 0.4); background: rgba(0,0,0,0.5); bottom: 0; transform: translate(0, 50%) rotateX(90deg) translate3d(0, 0, 1px) scale(1.05, 1.1); } .car__headlights { width: 25%; height: calc(var(--height) * 0.5); bottom: 0%; left: 0; transform: translate(-125%, 50%) rotateX(90deg) translate3d(0, 0, 1px); position: relative; } .car__headlights:after, .car__headlights:before { content: ''; position: absolute; height: 50%; width: 100%; background: var(--lamp); border-radius: 50%; filter: blur(10px); } .car__headlights:after { top: 0; } .car__headlights:before { bottom: 0; } .car__wheel { height: calc(var(--height) * 0.13); width: calc(var(--height) * 0.13); bottom: 0; } .car__wheel--f { left: 10%; } .car__wheel--r { right: 10%; } .car__wheel--osf, .car__wheel--osr { transform: translate3d(0, 0, calc(var(--height) * 0.2)); } .car__wheel--nsf, .car__wheel--nsr { transform: translate3d(0, 0, calc(var(--height) * -0.2)); } .car__body--bottom { bottom: 5%; width: 100%; height: 40%; } .car__body--top { bottom: 44.5%; width: 60%; height: 40%; left: 22%; } .car__siren { bottom: 85%; height: calc(var(--height) * 0.0725); width: calc(var(--height) * 0.0725); left: 50%; } .car__siren > * { position: absolute; top: 0; left: 0; } .car__mirrors { width: 5%; height: 13%; left: 24%; bottom: 40%; } .car__mirror { height: 100%; position: absolute; width: 100%; } .car__mirror--left { transform: translate3d(0, 0, calc((var(--height) * 0.2325) + 2px)); } .car__mirror--right { transform: translate3d(0, 0, calc((var(--height) * -0.2325) - 2px)); } .car__bumper { height: calc(var(--height) * 0.05); width: calc(var(--height) * 0.05); bottom: 4%; } .car__bumper--front { left: 0; transform: translate(-40%, 0); } .car__bumper--rear { right: 0; transform: translate(40%, 0); } @-webkit-keyframes bob { 0% { transform: translate(calc(var(--bob) * -0.5)); } 100% { transform: translate(calc(var(--bob) * 1.5)); } } @keyframes bob { 0% { transform: translate(calc(var(--bob) * -0.5)); } 100% { transform: translate(calc(var(--bob) * 1.5)); } } .body { --thickness: calc(var(--base-height) * 0.4); } .body--top div { background: var(--white-two); } .body--top div:nth-of-type(1) { background: linear-gradient(90deg, transparent 0 20%, var(--white-one) 20% 80%, transparent 80% 100%); } .body--top div:nth-of-type(2) { background: transparent; } .body--top div:nth-of-type(2):after { content: ''; position: absolute; width: 100%; height: 112%; background: var(--white-two); bottom: 0; left: 50%; transform: translate(-50%, 0) rotateX(27deg); transform-origin: 50% 100%; } .body--top div:nth-of-type(2):before { content: ''; position: absolute; width: 100%; height: 112%; background: linear-gradient(55deg, transparent 0 30%, var(--glare) 30% 40%, transparent 40% 45%, var(--glare) 45% 50%, transparent 50% 100%), var(--glass-two); bottom: 0; left: 50%; transform: translate(-50%, 0) rotateX(27deg) translate3d(0, 0, 1px); transform-origin: 50% 100%; --clip: inset(10% 10% 10% 10%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--top div:nth-of-type(3) { background: var(--white-four); } .body--top div:nth-of-type(4) { background-color: transparent; } .body--top div:nth-of-type(4):after { content: ''; position: absolute; width: 100%; height: 112%; background: var(--white-two); bottom: 0; left: 50%; transform: translate(-50%, 0) rotateX(-27deg); transform-origin: 50% 100%; } .body--top div:nth-of-type(4):before { content: ''; position: absolute; width: 100%; height: 112%; background: linear-gradient(55deg, transparent 0 30%, var(--glare) 30% 40%, transparent 40% 45%, var(--glare) 45% 50%, transparent 50% 100%), var(--glass-two); bottom: 0; left: 50%; transform: translate(-50%, 0) rotateX(-27deg) translate3d(0, 0, -1px); transform-origin: 50% 100%; --clip: inset(10% 10% 10% 10%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--top div:nth-of-type(5) { background: var(--white-three); --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--top div:nth-of-type(5):after { content: ''; background: linear-gradient(var(--white-three), var(--white-three)) 65% 50%/8% 100% no-repeat; background-color: var(--glass-three); position: absolute; height: 90%; width: 90%; bottom: 0; left: 50%; transform: translate(-50%, 0); --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--top div:nth-of-type(6) { background: var(--white-four); --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--top div:nth-of-type(6):after { content: ''; background: linear-gradient(var(--white-four), var(--white-four)) 35% 50%/8% 100% no-repeat; background-color: var(--glass-four); position: absolute; height: 90%; width: 90%; bottom: 0; left: 50%; transform: translate(-50%, 0); --clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%); -webkit-clip-path: var(--clip); clip-path: var(--clip); } .body--bottom div { background: var(--black-two); } .body--bottom div:nth-of-type(1) { background: linear-gradient(90deg, var(--black-one) 0 22%, var(--white-one) 22% 82%, var(--black-one) 82% 100%); background-color: var(--black-one); } .body--bottom div:nth-of-type(1):after { content: ''; background: var(--black-one); position: absolute; top: 50%; left: 50%; height: 99%; width: 101%; transform: translate3d(-50%, -50%, -1px); } .body--bottom div:nth-of-type(1):before { content: '382'; font-family: sans-serif; font-weight: bold; height: 30%; width: 40%; text-align: center; overflow: hidden; position: absolute; font-size: calc(var(--height) * 0.1); color: var(--white-one); right: 0; bottom: 50%; transform: translate3d(50%, 50%, 2px) rotate(-90deg) translate(0, -50%); } .body--bottom div:nth-of-type(2) { background: linear-gradient(var(--indicator), var(--indicator)) 95% 50%/5% 25% no-repeat, linear-gradient(var(--indicator), var(--indicator)) 5% 50%/5% 25% no-repeat, linear-gradient(var(--taillight), var(--taillight)) 10% 50%/15% 25% no-repeat, linear-gradient(var(--taillight), var(--taillight)) 90% 50%/15% 25% no-repeat; background-color: var(--black-two); } .body--bottom div:nth-of-type(3) { background-color: var(--black-four); } .body--bottom div:nth-of-type(4) { background: repeating-linear-gradient(transparent 0 20%, var(--black-four) 20% 40%) 50% 50%/25% 25% no-repeat, linear-gradient(var(--bumper-one), var(--bumper-one)) 50% 50%/35% 25% no-repeat, linear-gradient(var(--indicator), var(--indicator)) 95% 50%/5% 25% no-repeat, linear-gradient(var(--indicator), var(--indicator)) 5% 50%/5% 25% no-repeat, linear-gradient(var(--headlight), var(--headlight)) 10% 50%/15% 25% no-repeat, linear-gradient(var(--headlight), var(--headlight)) 90% 50%/15% 25% no-repeat; background-color: var(--black-two); } .body--bottom div:nth-of-type(5) { background: linear-gradient(90deg, var(--black-three) 0 22%, var(--white-three) 22% 82%, var(--black-three) 82% 100%); background-color: var(--black-three); } .body--bottom div:nth-of-type(5):after { content: ''; height: 75%; width: 35%; background: url("https://assets.codepen.io/605876/bear--gold-badge--large.png"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 35%; top: 50%; transform: translate(0, -50%); } .body--bottom div:nth-of-type(6) { background: linear-gradient(90deg, var(--black-four) 0 18%, var(--white-four) 18% 78%, var(--black-four) 78% 100%); background-color: var(--black-four); } .body--bottom div:nth-of-type(6):after { content: ''; height: 75%; width: 35%; background: url("//repo.bfw.wiki/bfwrepo/icon/5d835381dbe20.png"); background-repeat: no-repeat; background-size: contain; position: absolute; left: 45%; top: 50%; transform: translate(0, -50%); } .scene__road { --thickness: calc(var(--base-height)); } .scene__road > div:nth-of-type(1) { background-color: var(--road-one); } .scene__road > div:nth-of-type(2) { background: var(--road-two); } .scene__road > div:nth-of-type(3) { background: var(--road-four); } .scene__road > div:nth-of-type(4) { background-color: var(--road-two); } .scene__road > div:nth-of-type(5) { background: var(--road-three); } .scene__road > div:nth-of-type(6) { background: var(--road-four); } .siren--red { --thickness: calc(var(--base-height) * 0.1); --alpha: 0.25; transform: translate3d(0, 0, calc(var(--height) * -0.075)); --siren-red: hsla(5, 90%, 50%, var(--alpha)); -webkit-animation: flash var(--siren) infinite; animation: flash var(--siren) infinite; } .siren--red div { background: var(--siren-red); } .siren--blue { --alpha: 0.25; --thickness: calc(var(--base-height) * 0.1); --siren-blue: hsla(210, 90%, 50%, var(--alpha)); transform: translate3d(0, 0, calc(var(--height) * 0.075)); animation: flash var(--siren) infinite reverse; } .siren--blue div { background: var(--siren-blue); } .siren--middle { --thickness: calc(var(--base-height) * 0.05); transform: translate3d(0, 0, 0); } .siren--middle div { background: var(--white-one); } .siren--middle div:nth-of-type(1) { background: var(--white-one); } .siren--middle div:nth-of-type(2) { background: var(--white-two); } .siren--middle div:nth-of-type(3) { background: var(--white-three); } .siren--middle div:nth-of-type(4), .siren--middle div:nth-of-type(5) { background: var(--white-four); } .siren--middle div:nth-of-type(6) { background: var(--white-three); } .wheel { --thickness: calc(var(--base-height) * 0.05); } .wheel div { background: var(--wheel-four); } .wheel div:nth-of-type(1) { background: var(--wheel-one); } .wheel div:nth-of-type(2) { background: var(--wheel-two); } .wheel div:nth-of-type(3) { background: var(--wheel-three); } .wheel div:nth-of-type(4) { background: var(--wheel-four); } .wheel div:nth-of-type(5) { background: linear-gradient(var(--hub), var(--hub)) 50% 50%/35% 35% no-repeat; background-color: var(--wheel-four); } .wheel div:nth-of-type(6) { background: linear-gradient(var(--hub), var(--hub)) 50% 50%/35% 35% no-repeat; background-color: var(--wheel-three); } .bumper { --thickness: calc(var(--base-height) * 0.45); } .bumper div { background: var(--bumper-one); } .bumper div:nth-of-type(1) { background: var(--bumper-one); } .bumper div:nth-of-type(2) { background: var(--bumper-two); } .bumper div:nth-of-type(3) { background: var(--bumper-three); } .bumper div:nth-of-type(4), .bumper div:nth-of-type(5) { background: var(--bumper-four); } .bumper div:nth-of-type(6) { background: var(--bumper-three); } .mirror { --thickness: calc(var(--base-height) * 0.075); } .mirror div { background: var(--black-two); } .mirror div:nth-of-type(1) { background-color: var(--black-one); } .mirror div:nth-of-type(2) { background: linear-gradient(var(--white-one), var(--white-one)) 50% 50%/75% 75% no-repeat; background-color: var(--black-two); } .mirror div:nth-of-type(3) { background: var(--black-four); } .mirror div:nth-of-type(4) { background-color: var(--black-two); } .mirror div:nth-of-type(5) { background: var(--black-three); } .mirror div:nth-of-type(6) { background: var(--black-four); } .road__markings { height: 100%; width: 100%; overflow: hidden; } .road__markings--bottom { transform: translate3d(0, 0, -1px); } .road__markings--bottom:after { content: ''; position: absolute; height: 100%; width: calc(var(--width) * 2); background: repeating-linear-gradient(270deg, var(--road-marking-three) 0 10%, transparent 10% 15%) 0 50%/100% 5% no-repeat; bottom: 0; left: 50%; transform: translate3d(-50%, 0, 0); -webkit-animation: roll-bottom var(--speed) infinite linear; animation: roll-bottom var(--speed) infinite linear; } .road__markings--front { transform: translate3d(0, 0, -1px); } .road__markings--front:after { content: ''; position: absolute; height: calc(var(--base-height) * 1vmin); width: calc(var(--width) * 2); background: repeating-linear-gradient(270deg, var(--road-marking-two) 0 10%, transparent 10% 15%) 0 50%/100% 5% no-repeat; top: 0%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg) translate3d(-35%, 0, -1px); -webkit-animation: roll-front var(--speed) infinite linear; animation: roll-front var(--speed) infinite linear; } @-webkit-keyframes roll-front { to { transform: translate(-50%, -50%) rotate(-90deg) translate3d(-20%, 0, -1px); } } @keyframes roll-front { to { transform: translate(-50%, -50%) rotate(-90deg) translate3d(-20%, 0, -1px); } } .road__markings--back { transform: translate3d(0, 0, 1px); } .ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0