Isyarat Alien

Ini ialah penyerahan untuk Frontend Challenge v24.09.04, Glam Up My Markup: Space

Tetapi ia juga penyerahan untuk Frontend Challenge v24.09.04, CSS Art: Space.

Apa yang Saya Bina

Saya telah membina versi tidak boleh dibaca bagi penanda yang disediakan yang kelihatan seperti isyarat asing di angkasa. Itulah sebabnya ini adalah penyerahan berganda — ia juga berfungsi untuk Cabaran Seni CSS ?

Perjalanan

Cara yang menyeronokkan untuk merosakkan sebarang reka bentuk adalah dengan menggunakan:

* { display: contents }

Ini "mengalih keluar induk", jadi jika anda menambahkannya pada semua anak nod, pada dasarnya tiada teg, hanya kandungan mentah.

Sebelum kita ke sana, mari tambahkan beberapa gaya asas pada badan:

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;

Kami menetapkan segi empat sama (nisbah aspek) sebagai grid, dengan latar belakang jejari.

Seterusnya, kami menetapkan elemen kanak-kanak:

: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;
}

Kami menggunakan teknik "grid-stack" untuk meletakkan semua kanak-kanak dalam sel grid yang sama.

Ini memberi kita:

Alangkah huru-haranya! Sekarang, mari tambahkan putaran dan warna:

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; }
}

Sekarang kita dapat:

Hampir sampai! Apa yang perlu kita lakukan ialah menambah fon pelik dan animasi goyah:

@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

Atas ialah kandungan terperinci Isyarat Alien. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!