css+js实现幽灵火车发车到站时刻表代码-html代码-BFW代码库

代码语言：html
所属分类：表格
代码描述：css+js实现幽灵火车发车到站时刻表代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&amp;display=swap'>
  
<style>
:root {
  --title: "Ghost Train Schedule";
  --author: "Matt Cannon";
  --contact: "mc@mattcannon.design";
  --description: "A hauntingly animated split-flap board that displays arrivals and departures from the underworld's most trusted railway, Damnedtrak®.";
  --keywords: "ghost train, split-flap, schedule board, arrivals departures, halloween, animation, css grid, javascript animation, spooky ui, codepenchallenge, cpc-halloween-time, ui design, front-end, rubik font, motion design";
  --last-modified: "2025-10-06";
  --content-language: "en";
  --generator: "HTML5, CSS3, JavaScript";

  --bg: #0b0e13;
  --ink: #e8f0ff;
  --muted: #8d98ad;
  --ontime: #8cffd5;
  --arrived: #00c673;
  --warn: #ffcc33;
  --bad: #ff4b61;
  --weird: #66e7ff;
  --gap: 17px;
  --cell-h: 25px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #1b2230 0%, var(--bg) 60%) no-repeat;
  color: var(--ink);
}

.station-bg {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  min-height: 100dvh;
  max-height: 90vh;
  overflow: hidden;
  padding-top: 85px;
}

.bezel {
  width: 92%;
  max-width: 880px;
  border-radius: 20px;
  background: linear-gradient(#0d1116, #0b0e13);
  box-shadow: 0 25px 70px #000a, inset 0 1px 0 #ffffff12;
  padding: 18px 20px 24px;
  display: flex;
  flex-direction: column;
}

.bezel__plate {
  position: relative;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #0d1116;
  border: 1px solid #1b2433;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 0 16px;
}

.logo-img {
  width: 300px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.95;
  margin: 0;
}

.mast {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.mode select {
  background: #0c1015;
  color: var(--ink);
  border: 1px solid #f15f0a;
  border-radius: 8px;
  padding: 6px 44px 6px 14px;
  font-family: "Rubik", sans-serif;
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23b4b6bb' xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M6 9l6 6 6-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}

.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #1c2432;
  border-bottom: 1px solid #1c2432;
  margin: 10px 0 14px;
  height: 28px;
}

.marquee__track {
  position: absolute;
  inset: 0;
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: scroll 50s linear infinite;
}

.marquee__track span {
  display: inline-block;
  font-size: 14px;
  color: #b4b6bb;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding-right: 60px;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


.board {
  background: linear-gradient(#0e141b, #0b0f14);
  border: 1px solid #1b2633;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: var(--gap);
  padding: 14px;
  box-shadow: inset 0 1px 2px #ffffff10;
}

.board__head {
  text-transform: uppercase;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.15em;
  padding-bottom: 4px;
  font-weight: 500;
  text-align: center;
}

.cell {
  position: relative;
  height: var(--cell-h);
  perspective: 800px;
}

.slot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #0c1117;
  overflow: hidden;
  text-align: center;
  box-shadow: inset 0 -1px 6px #000a;
}

.slot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  opacity: 0.6;
  transform: translateY(-0.5px);
}

.slot .half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
}

.slot .half .txt {
  display: block;
  height: var(--cell-h);
  line-height: var(--cell-h);
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.top {
  top: 0;
  background: #0f141b;
}

.bottom {
  bottom: 0;
  background: #0c1117;
}

.bottom .txt {
  transform: translateY(calc(var(--cell-h) * -0.5));
}

.top-flip {
  top: 0;
  background: #0f141b;
  transform-origin: bottom;
  animation: flipTop 0.42s ease-in forwards;
  z-index: 2;
}

.bottom-flip {
  bottom: 0;
  background: #0c1117;
  transform-origin: top;
  animation: flipBottom 0.42s ease-out 0.42s forwards;
  z-index: 1;
}

.bottom-flip .txt {
  transform: translateY(calc(var(--cell-h) * -0.5));
}

@keyframes flipTop {
  to { transform: rotateX(-90deg); }
}

@keyframes flipBottom {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0); }
}

.cell[data-col="Time"] .txt,
.cell[data-col="Status"] .txt {
  font-weight: 700;
}

.cell[data-col="Status"][data-status="On time"] .slot { color: var(--ontime); }
.cell[data-col="Status"][data-status="Arrived"] .slot { color: var(--arrived); }
.cell[data-col="Status"][data-status="Boarding"] .slot { color: var(--warn); }
.cell[data-col="Status"][data-status="Delayed"] .slot { color: var(--bad); }
.cell[data-col="Status"][data-status="Manifesting"] .slot { color: var(--weird); }
</style>

  
</head>

<body translate="no">
  <div class="station-bg">
  <div class="bezel">
    <div class="bezel__plate">
      <img src="data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看