Pameran Seni Teks: Pertempuran Gladiator ⚔️

Pernahkah anda terfikir cara menggabungkan Seni Teks 3D yang menakjubkan dengan pengalaman web yang sangat interaktif dan mengasyikkan? Projek ini menunjukkan cara kami mencapainya untuk Pertempuran Gladiators—permainan kad berasaskan penyemak imbas tempat pemain mengumpul, bertempur dan menakluk dalam arena gladiator yang epik.

Dibina sebagai sebahagian daripada cabaran kreatif, projek ini mempamerkan animasi CSS lanjutan, interaktiviti JavaScript dan kesan 3D untuk mencipta pengalaman yang tidak dapat dilupakan. Sama ada anda seorang pembangun yang mencari inspirasi atau peminat gladiator, pameran ini akan memikat hati anda!

✨ Pratonton Keajaiban

Apabila anda melawati tunjuk cara, inilah yang anda akan alami:

• Reka bentuk seni teks 3D berputar yang bertindak balas secara dinamik kepada input tetikus anda.
• Zarah terapung yang menambah unsur ajaib dan interaktif.
• Kesan bercahaya interaktif mengikut kursor anda, meningkatkan kesan visual.
• Butang seruan tindak responsif yang menghalakan anda ke halaman utama Pertempuran Gladiators.

? Lihat demo langsung di CodePen

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

? Di Sebalik Reka Bentuk

Projek ini dibina menggunakan tiga teknologi teras hadapan: HTML, CSS dan JavaScript. Begini cara semuanya bersatu:

1. Struktur HTML

Strukturnya lurus dan mudah diikuti:

• Bekas untuk menyimpan semua elemen 3D dan interaktif.
• Logo untuk penjenamaan, memastikan Pertempuran Gladiators terserlah.
• CTA (Seruan Tindak) yang menggalakkan pengguna melawat dan bermain permainan.
• Snippet 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;
}

Cari CSS lengkap dalam projek CodePen.

1. Interaktiviti JavaScript

JavaScript menghidupkan halaman:

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.

Sorotan JavaScript Utama:

/

/ 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)`;
});

Cari kod JavaScript lengkap dalam projek CodePen.

⚔️ Mengapa Gladiator Bertempur?

Pertempuran Gladiators bukan sekadar permainan—ia adalah satu alam semesta strategi dan pengembaraan. Inilah yang anda boleh nantikan:

• Kumpul kad berkuasa: Bina dek impian anda dan kuasai arena.
• Battle AI atau pemain sebenar: Uji strategi anda dan tuntut kemuliaan.
• Dapatkan ganjaran: Buka kunci kad yang jarang ditemui dan mata wang dalam permainan yang berharga.
• Teroka permainan mini: Lebih 21 permainan mini unik, daripada pertempuran hingga teka-teki.

? Lawati sekarang: GladiatorsBattle.com

? Cara Mencuba Sendiri

? Kesimpulan: Alam Semesta Kemungkinan

Projek Seni Teks 3D ini adalah gambaran kecil tentang perkara yang boleh dilakukan dengan HTML, CSS dan JavaScript. Sama ada anda seorang pemula atau pembangun yang berpengalaman, projek kreatif seperti ini ialah cara terbaik untuk mempamerkan kemahiran anda dan membina pengalaman interaktif.

Tetapi ini hanyalah permulaan. Selami Pertempuran Gladiators, di mana anda akan menemui pertempuran epik, permainan mini yang menarik dan komuniti pemain dan pembangun yang berkembang maju.

? Teroka Lagi

• Tapak web: https://gladiatorsbattle.com/
• X (dahulunya Twitter): https://x.com/GladiatorsBT
• LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
• Discord: https://discord.gg/YBNF7KjGwx

Terima kasih kerana membaca, dan selamat mengekod! ?