文字藝術展示：角鬥士之戰⚔️

您是否想過如何將令人驚嘆的 3D 文字藝術與高度互動和身臨其境的網路體驗結合？該項目展示了我們如何在《角鬥士之戰》中實現這一目標——這是一款基於瀏覽器的紙牌遊戲，玩家可以在史詩般的角斗競技場中收集、戰鬥和征服。

作為創意挑戰的一部分，該專案展示了先進的 CSS 動畫、JavaScript 互動性和 3D 效果，以創造令人難忘的體驗。無論您是尋求靈感的開發者還是角鬥士愛好者，這個展示都會讓您著迷！

✨ 預覽魔法

當您造訪簡報時，您將體驗到以下內容：

• 旋轉的 3D 文字藝術設計，可動態回應您的滑鼠輸入。
• 浮動粒子加入了神奇的互動元素。
• 互動式發光效果跟隨遊標，增強視覺衝擊力。
• 響應式號召性用語按鈕，可引導您前往角鬥士之戰首頁。

？在 CodePen 上查看現場演示

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

？設計背後

這個專案是使用三種核心前端技術建構的：HTML、CSS 和 JavaScript。以下是所有內容的組合方式：

1. HTML 結構

結構簡單易懂：

• 用來容納所有 3D 和互動元素的容器。
• 品牌標誌，確保《角鬥士之戰》脫穎而出。
• CTA（號召性用語）鼓勵使用者造訪並玩遊戲。
• 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。

1. 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 程式碼。

⚔️ 角鬥士為何戰鬥？

Gladiators Battle 不只是一款遊戲，它還是一個充滿策略和冒險的世界。以下是您可以期待的：

• 收集強大的卡牌：構建你的夢想套牌並稱霸競技場。
• 與人工智慧或真實玩家戰鬥：測試你的策略並奪取榮耀。
• 賺取獎勵：解鎖稀有卡牌和寶貴的遊戲內貨幣。
• 探索迷你遊戲：超過 21 個獨特的迷你遊戲，從戰鬥到解謎。

？立即造訪：GladiatorsBattle.com

？如何親自嘗試

？結論：充滿無限可能

這個 3D 文字藝術專案是對 HTML、CSS 和 JavaScript 可能性的一個小小的展示。無論您是初學者還是經驗豐富的開發人員，像這樣的創意專案都是展示您的技能和建立互動體驗的絕佳方式。

但這只是開始。深入《角鬥士之戰》，在這裡您會發現史詩般的戰鬥、引人入勝的迷你遊戲以及蓬勃發展的遊戲玩家和開發者社群。

？探索更多

• 網址：https://gladiatorsbattle.com/
• X（以前的 Twitter）：https://x.com/GladiatorsBT
• 領英：https://www.linkedin.com/in/pierre-romain-lopez/
• 不和諧：https://discord.gg/YBNF7KjGwx

感謝您的閱讀，祝您編碼愉快！ ？