Produit Gladiator Vitrine de produits sur le thème Gladiator avec particules dynamiques et animations interactives-tutoriel CSS-php.cn

Produit Gladiator Vitrine de produits sur le thème Gladiator avec particules dynamiques et animations interactives

DDD

Libérer： 2024-11-14 15:39:02

original

363 Les gens l'ont consulté

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

簡介

在本教程中，我們將創建一個超優質的 3D 角斗士主題產品展示，其中包括動畫產品卡、動態懸停效果、點擊互動以及使每件物品栩栩如生的發光粒子效果。此展示專為沉浸式使用者體驗而設計，結合了 3D 變換、發光動畫和脈動亮點，為每件產品帶來獨特的互動感覺。這個設計的靈感來自《角鬥士之戰》，這是一款互動遊戲，玩家可以在其中體驗古代戰鬥和策略的快感。

跟隨創建您自己的互動式產品展示，並學習如何使用 HTML、CSS 和 JavaScript 來實現令人驚嘆的視覺效果和動態動畫。

第 1 步：設定 HTML 結構
每張產品卡都代表一個角鬥士主題的物品，例如盾牌或劍，並帶有徽章、圖標和統計數據等互動元素。

<!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;
}

Copier après la connexion

產品卡樣式
每張卡片均採用 3D 外觀設計，並包含用於互動的懸停效果。 :hover 效果提供微妙的旋轉和發光，增強高級感。

.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);
}

Copier après la connexion

統計數據和進度條
我們使用進度條來展示防禦力、耐久度等屬性，為展示增添了獨特的視覺元素。

.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);
}

Copier après la connexion

加入粒子效果
添加移動和改變顏色的粒子可以增強身臨其境的感覺。這些粒子可以脈動產生發光效果。

.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;
}

Copier après la connexion

第 3 步：新增 JavaScript 互動性
JavaScript 管理懸停動畫、點擊事件和發光粒子效果。

新增懸停和點擊動畫
我們透過滑鼠移動來製作卡片旋轉和縮放的動畫，並透過點擊切換縮放。

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)';
  });
});

Copier après la connexion

加入發光粒子
為了增強氣氛，我們創建了在每張產品卡周圍隨機移動的粒子。

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);

Copier après la connexion

結論
利用動態動畫和粒子效果建立 3D 角鬥士主題產品展示，打造引人入勝的互動體驗，吸引使用者。透過結合用於視覺樣式的 CSS 和用於互動性的 JavaScript，我們創建了一個高品質、沉浸式元件，非常適合產品展示或遊戲相關網站。受《角鬥士之戰》的啟發，該展示凸顯了現代網頁設計與歷史主題相結合的力量。

？發現更多：

Explorez Gladiators Battle : plongez dans un monde d'anciens guerriers et un gameplay stratégique sur https://gladiatorsbattle.com.
GitHub : consultez plus de projets sur https://github.com/HanGPIErr.
LinkedIn : connectez-vous pour des mises à jour sur les projets sur https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter : suivez-nous pour obtenir des informations sur la conception et le développement sur https://x.com/GladiatorsBT.
Restez à l'écoute pour plus de didacticiels sur la création de composants attrayants et interactifs !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!