js+css实现模拟红绿灯交叉路口汽车行驶动画代码-html代码-BFW代码库

js+css实现模拟红绿灯交叉路口汽车行驶动画代码

代码语言：html

所属分类：动画

代码描述：js+css实现模拟红绿灯交叉路口汽车行驶动画代码

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

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crossroad — Opposite Directions</title>
<style>
/* ── Variables ─────────────────────────────────────────────── */
:root {
  --road-w: 160px;
  --asphalt: #16213e;
  --lane-dash: #f0c040;
  --white-line: #e8e8e0;
  --grass: #0d1f0f;
  --b1: #0f3460;
  --b2: #162447;
  --b3: #1b1b2f;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #06060f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}

.page-title {
  color: #ffffff1a;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  white-space: nowrap;
}

/* ── Scene ─────────────────────────────────────────────────── */
.scene {
  position: relative;
  width: 600px;
  height: 600px;
  overflow: hidden;
  border-radius: 4px;
}

/* ── City Quadrants ────────────────────────────────────────── */
.quad {
  position: absolute;
  background: var(--grass);
  overflow: hidden;
}
.quad::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, #1a3a1a, transparent 60%),
    radial-gradient(circle at 80% 20%, #122a12, transparent 50%);
}
.quad-tl { top:0;    left:0;   width:calc(50% - var(--road-w)/2); height:calc(50% - var(--road-w)/2); }
.quad-tr { top:0;    right:0;  width:calc(50% - var(--road-w)/2); height:calc(50% - var(--road-w)/2); }
.quad-bl { bottom:0; left:0;   width:calc(50% - var(--road-w)/2); height:calc(50% - var(--road-w)/2); }
.quad-br { bottom:0; right:0;  width:calc(50% - var(--road-w)/2); height:calc(50% - var(--road-w)/2); }

/* ── Buildings ─────────────────────────────────────────────── */
.building {
  position: absolute;
  border-radius: 2px;
  box-shadow: 0 0 12px #00aaff11;
}
.building::before {
  content: '';
  position: absolute;
  inset: 4px;
  background:
    repeating-linear-gradient(0deg,  transparent 0, transparent 6px, #fff1 6px, #fff1 7px),
    repeating-linear-gradient(90deg, transparent 0, transparent 8px, #fff1 8px, #fff1 9px);
}
.building::after {
  content: '';
  position: absolute;
  inset: 4px;
  background:
    radial-gradient(circle at 20% 30%, #ffcc0033 0, transparent 8px),
    radial-gradient(circle at 70% 20%, #ffcc0055 0, transparent 6px),
    radial-gradient(circle at 40% 70%, #ffcc0044 0, transparent 7px),
    radial-gradient(circle at 80% 60%, #00aaff33 0, transparent 6px);
  animation: winBlink 3.5s ease-in-out infinite alternate;
}
@keyframes winBlink { 0%,100%{opacity:1} 50%{opacity:.35} }

.quad-tl .b1{background:var(--b1);bottom:10px;right:14px;width:65px;height:90px}
.quad-tl .b2{background:var(--b2);bottom:14px;left:10px;width:45px;height:65px}
.quad-tl .b3{background:var(--b3);top:10px;righ.........完整代码请登录后点击上方下载按钮下载查看