エイリアンシグナル-CSSチュートリアル-php.cn

エイリアンシグナル

PHPz

リリース： 2024-09-12 16:18:36

オリジナル

1371 人が閲覧しました

これはフロントエンドチャレンジ 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;
}

ログイン後にコピー

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

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

Alien Signals

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

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

ログイン後にコピー

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

Alien Signals

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

@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 サイトの他の関連記事を参照してください。