Pameran Produk Bertemakan Gladiator Produk Gladiator dengan Zarah Dinamik & Animasi Interaktif-tutorial css-php.cn

Pameran Produk Bertemakan Gladiator Produk Gladiator dengan Zarah Dinamik & Animasi Interaktif

DDD

Lepaskan： 2024-11-14 15:39:02

asal

420 orang telah melayarinya

Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations

Pengenalan

Dalam tutorial ini, kami akan mencipta pameran produk bertemakan gladiator 3D ultra-premium yang menampilkan kad produk animasi, kesan tuding dinamik, interaksi klik dan kesan zarah bercahaya yang menghidupkan setiap item. Direka bentuk untuk pengalaman pengguna yang mengasyikkan, pameran ini menggabungkan transformasi 3D, animasi bercahaya dan sorotan berdenyut untuk memberikan setiap produk rasa unik dan interaktif. Reka bentuk ini diilhamkan oleh Gladiators Battle, permainan interaktif di mana pemain mengalami keseronokan pertempuran dan strategi purba.

Ikuti bersama untuk mencipta pameran produk interaktif anda sendiri dan pelajari cara menggunakan HTML, CSS dan JavaScript untuk visual yang menakjubkan dan animasi dinamik.

Langkah 1: Menyediakan Struktur HTML
Setiap kad produk mewakili item bertemakan gladiator, seperti perisai atau pedang, dengan elemen interaktif seperti lencana, ikon dan statistik.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Gladiator Product Showcase</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <div>



<p>Key HTML Elements<br>
Badge: Labels each item with statuses like "New" or "Popular."<br>
Product Image: Displays the item with a glowing effect and 3D depth.<br>
Stats: Uses progress bars to display item attributes like defense or attack.<br>
Icons: Interactive icons at the bottom of each card provide quick access to favorite actions.<br>
Step 2: Designing with CSS<br>
Basic Styles and Background<br>
The background uses a radial gradient to create a dramatic look, while each product card is styled with gradients, shadows, and smooth transitions.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #1b1b2f, #090909);
  font-family: Arial, sans-serif;
  overflow: hidden;
  color: #fff;
}

.product-showcase {
  display: flex;
  gap: 40px;
  perspective: 1200px;
}

Salin selepas log masuk

Gaya Kad Produk
Setiap kad direka bentuk dengan rupa 3D dan termasuk kesan hover untuk interaktiviti. Kesan :hover memberikan putaran dan cahaya yang halus, meningkatkan rasa premium.

.product-card {
  position: relative;
  width: 270px;
  height: 420px;
  padding: 25px;
  background: linear-gradient(145deg, #2a2a2a, #3c3c3c);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.5s, box-shadow 0.5s, background 0.5s;
  cursor: pointer;
  overflow: hidden;
}

.product-card:hover {
  transform: scale(1.1) rotateY(10deg);
  box-shadow: 0 30px 60px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.7);
}

Salin selepas log masuk

Statistik dan Bar Kemajuan
Kami menggunakan bar kemajuan untuk memaparkan atribut seperti pertahanan dan ketahanan, yang menambahkan elemen visual yang unik pada pameran.

.stats {
  width: 100%;
  margin-top: 15px;
}

.stat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #ffd700;
  font-size: 14px;
  font-weight: bold;
}

.progress {
  width: 60%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffcc00, #f9844a);
}

Salin selepas log masuk

Menambah Kesan Zarah
Menambah zarah yang bergerak dan bertukar warna meningkatkan rasa yang mengasyikkan. Zarah ini boleh berdenyut untuk memberikan kesan glowing.

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.9);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 255, 0, 0.3);
  animation: particleAnimation 3s ease-in-out infinite, particleMove 4s linear infinite;
}

Salin selepas log masuk

Langkah 3: Menambah Interaktiviti JavaScript
JavaScript mengurus animasi tuding, acara klik dan kesan zarah bercahaya.

Menambahkan Animasi Tuding dan Klik
Kami menghidupkan putaran dan penskalaan kad pada pergerakan tetikus dan togol zum dengan satu klik.

const cards = document.querySelectorAll('.product-card');

cards.forEach((card) => {
  let isClicked = false;

  card.addEventListener('mousemove', (e) => {
    if (!isClicked) {
      const { width, height } = card.getBoundingClientRect();
      const offsetX = e.clientX - card.offsetLeft - width / 2;
      const offsetY = e.clientY - card.offsetTop - height / 2;
      const rotationX = (offsetY / height) * -25;
      const rotationY = (offsetX / width) * 25;

      card.style.transform = `rotateY(${rotationY}deg) rotateX(${rotationX}deg) scale(1.05)`;
    }
  });

  card.addEventListener('mouseleave', () => {
    if (!isClicked) {
      card.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)';
    }
  });

  card.addEventListener('click', () => {
    isClicked = !isClicked;
    card.style.transform = isClicked
      ? 'scale(1.2) rotateY(0deg) rotateX(0deg)'
      : 'rotateY(0deg) rotateX(0deg) scale(1)';
  });
});

Salin selepas log masuk

Menambah Zarah Bercahaya
Untuk meningkatkan suasana, kami mencipta zarah yang bergerak secara rawak di sekeliling setiap kad produk.

function addParticleEffect() {
  const particle = document.createElement('div');
  particle.classList.add('particle');
  particle.style.left = `${Math.random() * 100}%`;
  particle.style.top = `${Math.random() * 100}%`;
  particle.style.animationDuration = `${2 + Math.random() * 3}s`;
  document.body.appendChild(particle);

  setTimeout(() => particle.remove(), 5000);
}

setInterval(() => {
  cards.forEach(() => addParticleEffect());
}, 1000);

Salin selepas log masuk

Kesimpulan
Membina pameran produk bertemakan gladiator 3D dengan animasi dinamik dan kesan zarah mencipta pengalaman interaktif yang menarik yang boleh menawan hati pengguna. Dengan menggabungkan CSS untuk penggayaan visual dan JavaScript untuk interaktiviti, kami telah mencipta komponen imersif berkualiti tinggi yang ideal untuk paparan produk atau tapak berkaitan permainan. Diinspirasikan oleh Gladiators Battle, pameran ini menyerlahkan kuasa menggabungkan reka bentuk web moden dengan tema sejarah.

? Temui Lagi:

Terokai Pertempuran Gladiators: Terokai dunia pahlawan purba dan permainan strategik di https://gladiatorsbattle.com.
GitHub: Lihat lebih banyak projek di https://github.com/HanGPIErr.
LinkedIn: Sambung untuk kemas kini mengenai projek di https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Ikuti untuk mendapatkan pandangan reka bentuk dan pembangunan di https://x.com/GladiatorsBT.
Nantikan lebih banyak tutorial tentang mencipta komponen interaktif yang menarik!

Atas ialah kandungan terperinci Pameran Produk Bertemakan Gladiator Produk Gladiator dengan Zarah Dinamik & Animasi Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!