模板:PDBackground/styles.css

/* Template:ProjectDivide背景/styles.css — paste as sanitized-css, without <style>. */
/* The wrapper must not have overflow:hidden; that would prevent viewport sticky. */
.pd-page-shell {
  position: relative;
  z-index: 0;
}
.pd-page-content {
  position: relative;
  z-index: 1;
  /* Offset the background's flow height here, so its sticky margin box stays full-height. */
  margin-top: calc(64px - 100vh);
}
.pd-wire-background {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow: hidden;
  /* Decorative layer stays below the full-width .pd-page-content (z-index: 1). */
  z-index: 0;
  color: inherit;
}
.pd-wire-object {
  position: absolute;
  top: -120px;
  width: 70px;
  height: 50px;
  opacity: 0.18;
  animation: pd-wire-fall 30s linear infinite;
}
.pd-wire-object:nth-child(3n) {
  width: 49px;
  height: 35px;
  opacity: 0.12;
}
.pd-wire-object:nth-child(4n) {
  width: 84px;
  height: 60px;
  opacity: 0.22;
}
.pd-wire-plane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  border: 1px solid currentColor;
  background: transparent;
  backface-visibility: visible;
  animation: pd-wire-tumble 19s linear infinite;
}
.pd-wire-object:nth-child(even) .pd-wire-plane {
  animation-duration: 23s;
  animation-direction: reverse;
}
.pd-wire-node {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.pd-wire-node:nth-child(1) { left: 0; top: 0; }
.pd-wire-node:nth-child(2) { left: 100%; top: 0; }
.pd-wire-node:nth-child(3) { left: 100%; top: 100%; }
.pd-wire-node:nth-child(4) { left: 0; top: 100%; }

@keyframes pd-wire-fall {
  0% { transform: translate(-12px, 0); }
  100% { transform: translate(20px, calc(100vh + 240px)); }
}
@keyframes pd-wire-tumble {
  0% { transform: perspective(420px) rotateX(22deg) rotateY(10deg) rotateZ(-20deg); }
  50% { transform: perspective(420px) rotateX(195deg) rotateY(155deg) rotateZ(38deg); }
  100% { transform: perspective(420px) rotateX(382deg) rotateY(370deg) rotateZ(-20deg); }
}

/* Per-object positions and phases are added below. Keep direct-child order. */
/* BEGIN GENERATED PHASES */
.pd-wire-object:nth-child(1) { left: 4%; animation-duration: 27s; animation-delay: -3s; }
.pd-wire-object:nth-child(1) .pd-wire-plane { animation-delay: -2s; }
.pd-wire-object:nth-child(2) { left: 12%; animation-duration: 31s; animation-delay: -20s; }
.pd-wire-object:nth-child(2) .pd-wire-plane { animation-delay: -9s; }
.pd-wire-object:nth-child(3) { left: 20%; animation-duration: 29s; animation-delay: -10s; }
.pd-wire-object:nth-child(3) .pd-wire-plane { animation-delay: -4s; }
.pd-wire-object:nth-child(4) { left: 28%; animation-duration: 33s; animation-delay: -28s; }
.pd-wire-object:nth-child(4) .pd-wire-plane { animation-delay: -15s; }
.pd-wire-object:nth-child(5) { left: 36%; animation-duration: 28s; animation-delay: -6s; }
.pd-wire-object:nth-child(5) .pd-wire-plane { animation-delay: -11s; }
.pd-wire-object:nth-child(6) { left: 44%; animation-duration: 32s; animation-delay: -16s; }
.pd-wire-object:nth-child(6) .pd-wire-plane { animation-delay: -6s; }
.pd-wire-object:nth-child(7) { left: 52%; animation-duration: 30s; animation-delay: -26s; }
.pd-wire-object:nth-child(7) .pd-wire-plane { animation-delay: -17s; }
.pd-wire-object:nth-child(8) { left: 60%; animation-duration: 34s; animation-delay: -12s; }
.pd-wire-object:nth-child(8) .pd-wire-plane { animation-delay: -3s; }
.pd-wire-object:nth-child(9) { left: 68%; animation-duration: 27s; animation-delay: -18s; }
.pd-wire-object:nth-child(9) .pd-wire-plane { animation-delay: -13s; }
.pd-wire-object:nth-child(10) { left: 76%; animation-duration: 31s; animation-delay: -5s; }
.pd-wire-object:nth-child(10) .pd-wire-plane { animation-delay: -8s; }
.pd-wire-object:nth-child(11) { left: 84%; animation-duration: 29s; animation-delay: -16s; }
.pd-wire-object:nth-child(11) .pd-wire-plane { animation-delay: -5s; }
.pd-wire-object:nth-child(12) { left: 90%; animation-duration: 33s; animation-delay: -25s; }
.pd-wire-object:nth-child(12) .pd-wire-plane { animation-delay: -12s; }
.pd-wire-object:nth-child(13) { left: 7%; animation-duration: 28s; animation-delay: -24s; }
.pd-wire-object:nth-child(13) .pd-wire-plane { animation-delay: -7s; }
.pd-wire-object:nth-child(14) { left: 32%; animation-duration: 32s; animation-delay: -12s; }
.pd-wire-object:nth-child(14) .pd-wire-plane { animation-delay: -10s; }
.pd-wire-object:nth-child(15) { left: 64%; animation-duration: 30s; animation-delay: -3s; }
.pd-wire-object:nth-child(15) .pd-wire-plane { animation-delay: -14s; }
.pd-wire-object:nth-child(16) { left: 87%; animation-duration: 34s; animation-delay: -16s; }
.pd-wire-object:nth-child(16) .pd-wire-plane { animation-delay: -1s; }
/* END GENERATED PHASES */

/* Compact Timeless layouts: reduce before the reading column becomes narrow. */
@media screen and (max-width: 960px) {
  .pd-wire-object:nth-child(even) { display: none; }
  .pd-wire-object:nth-child(odd) { width: 70px; height: 50px; opacity: 0.18; }
  .pd-wire-object:nth-child(3n) { width: 49px; height: 35px; opacity: 0.12; }
}
/* BEGIN REDUCED MOTION PHASES */
@media (prefers-reduced-motion: reduce) {
  /* MediaWiki core forces tiny durations/delays; preserve the authored paused phases. */
  .pd-wire-object, .pd-wire-plane { animation-iteration-count: infinite !important; animation-play-state: paused !important; }
  .pd-wire-plane { animation-duration: 19s !important; }
  .pd-wire-object:nth-child(even) .pd-wire-plane { animation-duration: 23s !important; }
  .pd-wire-object:nth-child(1) { animation-duration: 27s !important; animation-delay: -3s !important; }
  .pd-wire-object:nth-child(1) .pd-wire-plane { animation-delay: -2s !important; }
  .pd-wire-object:nth-child(2) { animation-duration: 31s !important; animation-delay: -20s !important; }
  .pd-wire-object:nth-child(2) .pd-wire-plane { animation-delay: -9s !important; }
  .pd-wire-object:nth-child(3) { animation-duration: 29s !important; animation-delay: -10s !important; }
  .pd-wire-object:nth-child(3) .pd-wire-plane { animation-delay: -4s !important; }
  .pd-wire-object:nth-child(4) { animation-duration: 33s !important; animation-delay: -28s !important; }
  .pd-wire-object:nth-child(4) .pd-wire-plane { animation-delay: -15s !important; }
  .pd-wire-object:nth-child(5) { animation-duration: 28s !important; animation-delay: -6s !important; }
  .pd-wire-object:nth-child(5) .pd-wire-plane { animation-delay: -11s !important; }
  .pd-wire-object:nth-child(6) { animation-duration: 32s !important; animation-delay: -16s !important; }
  .pd-wire-object:nth-child(6) .pd-wire-plane { animation-delay: -6s !important; }
  .pd-wire-object:nth-child(7) { animation-duration: 30s !important; animation-delay: -26s !important; }
  .pd-wire-object:nth-child(7) .pd-wire-plane { animation-delay: -17s !important; }
  .pd-wire-object:nth-child(8) { animation-duration: 34s !important; animation-delay: -12s !important; }
  .pd-wire-object:nth-child(8) .pd-wire-plane { animation-delay: -3s !important; }
  .pd-wire-object:nth-child(9) { animation-duration: 27s !important; animation-delay: -18s !important; }
  .pd-wire-object:nth-child(9) .pd-wire-plane { animation-delay: -13s !important; }
  .pd-wire-object:nth-child(10) { animation-duration: 31s !important; animation-delay: -5s !important; }
  .pd-wire-object:nth-child(10) .pd-wire-plane { animation-delay: -8s !important; }
  .pd-wire-object:nth-child(11) { animation-duration: 29s !important; animation-delay: -16s !important; }
  .pd-wire-object:nth-child(11) .pd-wire-plane { animation-delay: -5s !important; }
  .pd-wire-object:nth-child(12) { animation-duration: 33s !important; animation-delay: -25s !important; }
  .pd-wire-object:nth-child(12) .pd-wire-plane { animation-delay: -12s !important; }
  .pd-wire-object:nth-child(13) { animation-duration: 28s !important; animation-delay: -24s !important; }
  .pd-wire-object:nth-child(13) .pd-wire-plane { animation-delay: -7s !important; }
  .pd-wire-object:nth-child(14) { animation-duration: 32s !important; animation-delay: -12s !important; }
  .pd-wire-object:nth-child(14) .pd-wire-plane { animation-delay: -10s !important; }
  .pd-wire-object:nth-child(15) { animation-duration: 30s !important; animation-delay: -3s !important; }
  .pd-wire-object:nth-child(15) .pd-wire-plane { animation-delay: -14s !important; }
  .pd-wire-object:nth-child(16) { animation-duration: 34s !important; animation-delay: -16s !important; }
  .pd-wire-object:nth-child(16) .pd-wire-plane { animation-delay: -1s !important; }
}
/* END REDUCED MOTION PHASES */
@media print {
  .pd-wire-background { display: none; }
  .pd-page-content { margin-top: 0; }
}