テキストアートショーケース: グラディエーターバトル ⚔️-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

テキストアートショーケース: グラディエーターバトル ⚔️

Barbara Streisand

Nov 27, 2024 pm 06:12 PM

Text Art Showcase: Gladiators Battle ⚔️

見事な 3D テキストアートと、高度にインタラクティブで没入型の Web エクスペリエンスを組み合わせる方法を考えたことはありますか?このプロジェクトは、プレイヤーが壮大な剣闘士のアリーナで収集、戦闘、征服するブラウザベースのカードゲームである Gladiators Battle で、まさにそれをどのように達成したかを示しています。

創造的な挑戦の一環として構築されたこのプロジェクトでは、高度な CSS アニメーション、JavaScript インタラクティブ性、3D 効果を紹介し、忘れられない体験を生み出します。インスピレーションを求めている開発者であっても、剣闘士の愛好家であっても、このショーケースはあなたを魅了するでしょう!

✨魔法をプレビューしてください

デモにアクセスすると、次のことが体験できます:

マウス入力に動的に反応する、回転する 3D テキストアートデザイン。
魔法のようなインタラクティブな要素を追加する浮遊粒子。
カーソルに追従するインタラクティブな光るエフェクトにより、視覚的なインパクトが高まります。
Gladiators Battle ホームページに誘導する、応答性の高い CTA ボタン。

? CodePen のライブデモをチェックしてください

https://codepen.io/HanGPIIIErr/pen/ZYzzMvO

?デザインの裏側

このプロジェクトは、HTML、CSS、JavaScript という 3 つのコアフロントエンドテクノロジを使用して構築されました。すべてがどのようにまとめられるかは次のとおりです:

HTML 構造

構造は単純で理解しやすいです:

すべての 3D 要素とインタラクティブ要素を保持するコンテナー。
グラディエーターバトルを目立たせるためのブランディング用のロゴ。
ユーザーにゲームにアクセスしてプレイするよう促す CTA (Call-to-Action)。
HTML スニペット:

<div>



<ol>
<li>CSS Styling</li>
</ol>

<p>The CSS transforms the structure into an immersive masterpiece:</p>

<ul>
<li>3D Perspective: Elements like the title and subtitle have depth using translateZ and rotation.</li>
<li>Dynamic Gradients and Shadows: These provide glowing effects, making the text pop.</li>
<li>Animations: Floating movements and glowing halos give a modern, fluid look.</li>
</ul>

<p>Key CSS Highlights:<br>
</p>

<pre class="brush:php;toolbar:false">.title {
  font-family: 'Cinzel', serif;
  font-size: 7rem;
  color: transparent;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffcc00, #ff4700, #e5b240, #ffcc00);
  -webkit-background-clip: text;
  text-shadow: 0px 6px 10px rgba(255, 71, 0, 0.6), 0 0 30px rgba(255, 204, 0, 0.8);
  transform: translateZ(100px) rotateX(10deg) rotateY(-10deg);
  animation: floating-title 4s infinite alternate ease-in-out, pulse 5s infinite;
}

ログイン後にコピー

CodePen プロジェクトで完全な CSS を見つけます。

JavaScript のインタラクティブ性

JavaScript はページに命を吹き込みます:

Mouse Tracking: Tilts the text dynamically based on cursor movement.
Floating Particles: Particles follow your mouse, adding a magical touch.
Smooth Entry Animations: The logo and text art fade in gracefully when the page loads.

ログイン後にコピー

JavaScript の主なハイライト:

/ Dynamic 3D Tilt Effect
textArt.addEventListener('mousemove', (e) => {
  const { clientX, clientY } = e;
  const { width, height } = container.getBoundingClientRect();

  const xRotation = ((clientY / height) - 0.5) * 30;
  const yRotation = ((clientX / width) - 0.5) * 30;

  textArt.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
});

ログイン後にコピー

CodePen プロジェクトで完全な JavaScript コードを見つけます。

⚔️なぜ剣闘士は戦うのですか?

グラディエーターバトルは単なるゲームではなく、戦略と冒険の世界です。楽しみにできることは次のとおりです: