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

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

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

貓

ビューに貓の畫像を取り込み、クラス「cat」を割り當(dāng)てます

<%= 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 番目の回転は最初の回転を打ち消して、貓を直立狀態(tài)に保ちます。アニメーションだけを見た方がわかりやすいです。 XD.

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

少し左にある



少し右へ。

魔法です!

キューブ

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

とにかく、ビュー內(nèi)でスケルトンを構(gòu)築します。結(jié)局のところ、私たちのキューブには家が必要です。

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

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

ループ內(nèi)の各面に表示したい情報を追加します。

  <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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173429456116557.jpg" class="lazy" 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);
}

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

うまくいったことに本當(dāng)に興奮しています。

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

以上が浮かぶ貓と立方體の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。