角斗士产品角斗士主题产品展示，带有动态粒子和交互式动画-css教程-PHP中文网

首页

web前端

css教程

角斗士产品角斗士主题产品展示，带有动态粒子和交互式动画

DDD

Nov 14, 2024 pm 03:39 PM

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

登录后复制

产品卡片样式
每张卡片均采用 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);
}

登录后复制

统计数据和进度条
我们使用进度条来展示防御力、耐久度等属性，为展示增添了独特的视觉元素。

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

登录后复制

添加粒子效果
添加移动和改变颜色的粒子可以增强身临其境的感觉。这些粒子可以脉动产生发光效果。

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

登录后复制

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

登录后复制

添加发光粒子
为了增强气氛，我们创建了在每张产品卡周围随机移动的粒子。

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

登录后复制

结论
利用动态动画和粒子效果构建 3D 角斗士主题产品展示，打造引人入胜的互动体验，吸引用户。通过将用于视觉样式的 CSS 和用于交互性的 JavaScript 相结合，我们创建了一个高质量的沉浸式组件，非常适合产品展示或游戏相关网站。受《角斗士之战》的启发，该展示凸显了现代网页设计与历史主题相结合的力量。

？发现更多：

探索角斗士之战：在 https://gladiatorsbattle.com 潜入古代武士和战略游戏的世界。
GitHub：查看更多项目：https://github.com/HanGPIErr。
LinkedIn：连接以获取项目更新：https://www.linkedin.com/in/pierre-romain-lopez/。
Twitter：关注 https://x.com/GladiatorsBT 了解设计和开发见解。
请继续关注有关创建引人入胜的交互式组件的更多教程！

以上是角斗士产品角斗士主题产品展示，带有动态粒子和交互式动画的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn