浮かぶ猫と立方体-CSSチュートリアル-php.cn

浮かぶ猫と立方体

DDD

リリース： 2024-12-16 04:29:12

オリジナル

895 人が閲覧しました

自分のプロジェクトにスタイルを追加できるように、「自由な」時間が待ちきれませんでした。ちょっとしたインタラクティブ性がページに活気を与えます。

浮かぶ猫が欲しいですか?問題ない。 AI を使用して猫の画像を作成し、Illustator で背景を「手動」で抽出して、.png 画像に素敵な切り抜き効果をもたらしました。バム。猫。

彼を少し動かして、浮いているように見せてみましょう。私のお気に入りの CSS アニメーションの 1 つは orbit です。これは本当に便利で、さまざまなことができます。

猫

ビューに猫の画像を取り込み、クラス「cat」を割り当てます

<%= image_tag "favicon.png", alt:"ベンダーブース", width:"40%", height:"40%", class:"cat" %>

ここで、CSS ファイルで「猫」のスタイルを作成します。 cat では、以下に示すように、アニメーションを orbit と呼びます。

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
}

ログイン後にコピー

ここでは、x 原点から 15 ピクセル離れた位置で、0 度から開始して、「角度 0 度から開始して猫を回転」していることがわかります。

猫は 15 ピクセル離れた位置で 360 度一周します。 -360 の 2 番目の回転は最初の回転を打ち消して、猫を直立状態に保ちます。アニメーションだけを見た方がわかりやすいです。 XD.

彼がページ中を飛び回るのは望ましくないので、私たちは彼を少しだけ移動させています。それだけでも十分に刺激的です。

少し左にある
Floating Cats and Cubes

少し右へ。

魔法です!

キューブ

私は以前、CSS を使用して立方体を作成する方法を学習しました。それは素晴らしいし、素敵なことですが、私は今日、立方体をダイナミックな方法で再利用するというワイルドなアイデアを思いつきました。立方体の面にリアルタイムでデータを入力したいと考えていました。たとえば、今後いくつかのイベントが予定されています。ランディングページで楽しい発見をするようなものです。なぜだめですか。これは刺激的です。

とにかく、ビュー内でスケルトンを構築します。結局のところ、私たちのキューブには家が必要です。

ユーザーがキューブを操作できるように、いくつかのラジオボタンがあります。

各ラジオボタンには異なる立方体の面が表示されます。

ループ内の各面に表示したい情報を追加します。

  <div>




<hr>

<p>Handling the css is a bit of a dance. Especially with viewports and what not. This is not the answer for mobile but it will work and be functional on a bigger screen, LOL. I'm just gonna leave this here for you. Open to suggestions for handling a small screen size. <br>
</p>
<hr>



<p><img src="https://img.php.cn/upload/article/000/000/000/173429456116557.jpg" alt="Floating Cats and Cubes"><br>
<br><br>
</p>

<pre class="brush:php;toolbar:false">
/*===========
rotating cube
==============*/

.cube-container {
  width: 30vw;
  height: 40vh;
  text-align: center;
  perspective: 100em;    
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  border: 5px solid transparent;  
  margin-top:100px; 
  display: block;
}

.cube-side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgb(64, 0, 148);
  border: 1px solid white;
  background-position: center;
  background-size: cover;
  border: 4px solid lime;
}

.cube-side:nth-child(1){
  transform: rotateY(0deg) translateZ(10em);
}

.cube-side:nth-child(2){
  transform: rotateY(90deg) translateZ(10em);
}

.cube-side:nth-child(3){
  transform: rotateY(180deg) translateZ(10em);
}

.cube-side:nth-child(4){
  transform: rotateY(-90deg) translateZ(10em);
}

.cube-side:nth-child(5){
  transform: rotateX(90deg) translateZ(9.75em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}

.cube-side:nth-child(6){
  transform: rotateX(-90deg) translateZ(9.3em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}


/* cube radio buttons */

.radio-button {
  transform: translateX(-50px);
}

.radio-button:checked ~ .cube{
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19. 1, 0.22, 1);
}

.radio-button:nth-child(1):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(20deg);
}

.radio-button:nth-child(2):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(180deg);
}

.radio-button:nth-child(3):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(90deg);
}

.radio-button:nth-child(4):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(-90deg);
}

.radio-button:nth-child(5):checked ~ .cube {
  transform: rotateX(-105deg) rotateY(0deg);
}

.radio-button:nth-child(6):checked ~ .cube {
  transform: rotateX(75deg) rotateY(0deg);
}

ログイン後にコピー

各ボタンと側面は個別に処理されています。よりエレガントなソリューションが存在する場合は、ぜひそれを見てみたいと思います。

うまくいったことに本当に興奮しています。

ご覧いただきありがとうございます!

以上が浮かぶ猫と立方体の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。