Alien Signals

Dies ist eine Einreichung für Frontend Challenge v24.09.04, Glam Up My Markup: Space

Aber es ist auch eine Einreichung für Frontend Challenge v24.09.04, CSS Art: Space.

Was ich gebaut habe

Ich habe eine unlesbare Version des bereitgestellten Markups erstellt, die wie außerirdische Signale im Weltraum aussieht. Deshalb ist dies eine Doppeleinreichung – sie funktioniert auch für die CSS Art Challenge ?

Reise

Eine unterhaltsame Möglichkeit, jedes Design zu ruinieren, ist die Verwendung von:

* { display: contents }

Dadurch wird „das übergeordnete Element entfernt“. Wenn Sie es also allen untergeordneten Knoten eines Knotens hinzufügen, gibt es im Wesentlichen keine Tags, sondern nur Rohinhalt.

Bevor wir dorthin gehen, fügen wir dem Körper einige grundlegende Stile hinzu:

body {
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at center,
    #1d2a30 40%,
    #0B1215 75%,
    #111);
  container-type: inline-size;
  display: grid;
  margin: 0;
  width: 100vw;

Wir legen ein Quadrat (Seitenverhältnis) als Raster fest, mit einem radialen Hintergrund.

Als nächstes legen wir die untergeordneten Elemente fest:

:is(footer, header, section) {
  * { display: contents; }
  font-size: 3cqi;
  grid-area: 1 / 1;
  height: 25cqi;
  overflow: hidden;
  place-content: center;
  place-self: center;
  text-align: center;
  width: 80cqi;
}

Wir verwenden die „Grid-Stack“-Technik, um alle Kinder in derselben Gitterzelle zu platzieren.

Das gibt uns:

Was für ein Durcheinander! Fügen wir nun Drehung und Farbe hinzu:

footer { rotate: 300deg; color: #FFFD; }
header { color: #FFFA; }
section {
  &:nth-of-type(1) { rotate: 60deg; color: #FFF4; }
  &:nth-of-type(2) { rotate: 120deg; color: #FFF9; }
  &:nth-of-type(3) { rotate: 180deg; color: #FFFE; }
  &:nth-of-type(4) { rotate: 240deg; color: #FFF7; }
}

Jetzt bekommen wir:

Fast geschafft! Alles, was wir tun müssen, ist eine seltsame Schriftart und eine verwackelte Animation hinzuzufügen:

@import url('https://fonts.googleapis.com/css2?
family=Redacted+Script&display=swap');

@keyframes shake {
  0% { transform: skewY(-15deg); }
  1% { transform: skewY(15deg); }
  2% { transform: skewY(-15deg); }
  3% { transform: skewY(15deg); }
  4%, 100% { transform: skewY(0deg); translate: 0; }
  5% { translate: -100vw -50vw; }
  6% { translate: 100vw 50vw; }
  7% { translate: 0; }
}

Demo

Das obige ist der detaillierte Inhalt vonAlien Signals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!