CSS 动画网格布局—

HTML

 
<h1>Animated Mondrian</h1>
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>
<div class="warning">
  <p>ℹ️ You are using Chrome but need at least version 107 to check this demo</p>
</div>

CSS

​x
 
@keyframes animate-columns {
  0% {
    grid-template-columns: 17vmin 8vmin 5vmin 7vmin 10vmin 15vmin 15vmin;
    grid-template-rows: 4vmin 9vmin 15vmin 7vmin 13vmin 8vmin 5vmin;
  }
  25% {
    grid-template-columns: 10vmin 8vmin 15vmin 5vmin 7vmin 15vmin 17vmin;
    grid-template-rows: 15vmin 4vmin 7vmin 8vmin 5vmin 13vmin 9vmin;
  }
  50% {
    grid-template-columns: 15vmin 10vmin 17vmin 5vmin 7vmin 15vmin 8vmin;
    grid-template-rows: 4vmin 9vmin 5vmin 13vmin 7vmin 8vmin 15vmin;
  }
  75% {
    grid-template-columns: 8vmin 5vmin 7vmin 15vmin 17vmin 15vmin 10vmin;
    grid-template-rows: 13vmin 4vmin 15vmin 9vmin 5vmin 7vmin 8vmin;
  }
  100% {
    grid-template-columns: 10vmin 8vmin 5vmin 7vmin 15vmin 15vmin 17vmin;
    grid-template-rows: 4vmin 15vmin 9vmin 7vmin 8vmin 5vmin 13vmin;
  }
}
​
.grid {
  display: grid;
  gap: 2vmin;
  padding: 2vmin;
  grid-template-columns: 17vmin 8vmin 5vmin 7vmin 10vmin 15vmin 15vmin;
  grid-template-rows: 4vmin 9vmin 15vmin 7vmin 13vmin 8vmin 5vmin;
  align-items: stretch;
  justify-items: stretch;
  background: #333;
​
  animation: animate-columns 30s ease-in-out infinite alternate;
}
​
.grid > * {
  width: 100%;
  background: rgb(0 0 0);
​
  --light1: #e5eeeb;
  --light2: #f2e7d5;
  --light3: #fcfde7;
  --light4: #dfe5d0;
  --light5: #e3ded9;
  --yellow1: #f2c968;
  --yellow2: #edcc6b;
  --red1: #d62d24;
  --red2: #d73630;
  --dark1: #130409;
  --dark2: #0b0205;
  --dark3: #c0bfba;
  --blue: #241785;
}
​
.grid > :nth-child(1n) {
  background: var(--light1);
}
.grid > :nth-child(2n) {
  background: var(--light2);
}
.grid > :nth-child(3n) {
  background: var(--yellow1);
}
.grid > :nth-child(4n) {
  background: var(--light5);
}
​
.grid > :nth-child(1) {
  background: var(--red1);
}
.grid > :nth-child(2) {
  grid-column: span 2;
  background: var(--light3);
}
.grid > :nth-child(5) {
  grid-column: span 2;
  grid-row: span 3;
  background: var(--yellow1);
}
.grid > :nth-child(9),
.grid > :nth-child(13) {
  grid-row: span 2;
  background: var(--yellow2);
}
.grid > :nth-child(7) {
  grid-column: span 3;
  grid-row: span 2;
  background: var(--blue);
}
.grid > :nth-child(8) {
  background: var(--dark3);
}
.grid > :nth-child(9) {
  background: var(--light5);
}
.grid > :nth-child(10) {
  grid-column: span 3;
  grid-row: span 4;
  background: var(--light1);
}
.grid > :nth-child(12),
.grid > :nth-child(17) {
  grid-row: span 2;
}
.grid > :nth-child(14),
.grid > :nth-child(6) {
  grid-row: span 3;
  background: var(--light3);
}
.grid > :nth-child(16) {
  background: var(--red2);
}
.grid > :nth-child(18) {
  background: var(--dark1);
}
​
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fcfcfc;
}
​
body {
  display: grid;
  place-content: center;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
​
.warning {
  display: none;
}

JAVASCRIPT

xxxxxxxxxx
 
const showWarningInChromiumWithNoSupport = () => {
  if (!navigator.userAgentData || !navigator.userAgentData.brands) return;
​
  const chromium = navigator.userAgentData.brands.filter(
    (b) => b.brand == "Chromium"
  );
  if (!chromium) return;
​
  if (chromium[0].version >= 107) return;
  document.querySelector(".warning").style.display = "block";
};
​
showWarningInChromiumWithNoSupport();