Heim > Web-Frontend > CSS-Tutorial > Alien Signals

Alien Signals

WBOY
Freigeben: 2024-09-12 16:18:29
Original
1298 Leute haben es durchsucht

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 }
Nach dem Login kopieren

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;
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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

Das gibt uns:

Alien Signals

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; }
}
Nach dem Login kopieren

Jetzt bekommen wir:

Alien Signals

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; }
}
Nach dem Login kopieren

Demo

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

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage