エイリアンシグナル

これはフロントエンド チャレンジ v24.09.04、Glam Up My Markup: Space への提出です

しかし、これは Frontend Challenge v24.09.04、CSS Art: Space への提出物でもあります。

私が作ったもの

私は、宇宙にある宇宙人の信号のように見える、提供されたマークアップの判読不能なバージョンを作成しました。これが二重提出である理由です。CSS アート チャレンジでも機能します?

旅

どんなデザインでも台無しにする楽しい方法は次のようなものを使用することです:

* { display: contents }

これは「親を削除」するため、これをノードのすべての子に追加すると、本質的にタグはなくなり、生のコンテンツのみが存在します。

その前に、body に基本的なスタイルをいくつか追加しましょう:

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;

放射状の背景を持つ正方形 (アスペクト比) をグリッドとして設定します。

次に、子要素を設定します。

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

「グリッド スタック」技術を使用して、すべての子を同じグリッド セルに配置します。

これにより次のことが得られます:

なんてひどいことでしょう！次に、回転と色を追加しましょう:

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

これで次のことが得られます:

もうすぐです!必要なのは、奇妙なフォントと不安定なアニメーションを追加することだけです:

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

デモ

以上がエイリアンシグナルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。