gsap+css实现三维轿车在马路昼夜行驶动画效果代码-html代码-BFW代码库

gsap+css实现三维轿车在马路昼夜行驶动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+css实现三维轿车在马路昼夜行驶动画效果代码，点击切换昼夜。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import "normalize.css";

.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 {
  --on: 1;
  --base-size: 1vmin;
  --base-height: calc(45 * 0.65);
  --base-width: calc(75 * 0.65);
  --body-one: hsl(10 100% 50%);
  --body-two: hsl(10 100% 50%);
  --body-three: hsl(10 100% 50%);
  --body-four: hsl(10 100% 50%);
  --seal: hsl(10 90% 40%);
  --speed: 0.4s;
  --bg: hsl(210, 100%, calc((15 + (var(--on, 0) * 64)) * 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-one: hsl(0 0% 40%);
  --road-two: hsl(0 0% 40%);
  --road-three: hsl(0 0% 40%);
  --road-four: hsl(0 0% 40%);
  --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, 90%, calc((80 + (var(--on, 0) * 10)) * 1%), 0.75);
  --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: hs.........完整代码请登录后点击上方下载按钮下载查看