Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations-CSS Tutorial-php.cn

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

소개

이 튜토리얼에서는 애니메이션 제품 카드, 동적 호버 효과, 클릭 상호 작용, 각 항목에 생기를 불어넣는 빛나는 입자 효과를 갖춘 초프리미엄 3D 검투사 테마 제품 쇼케이스를 만들어 보겠습니다. 몰입형 사용자 경험을 위해 디자인된 이 쇼케이스는 3D 변환, 빛나는 애니메이션, 맥동하는 하이라이트를 결합하여 각 제품에 독특하고 상호 작용적인 느낌을 줍니다. 이 디자인은 플레이어가 고대 전투와 전략의 스릴을 경험할 수 있는 인터랙티브 게임인 Gladiators Battle에서 영감을 받았습니다.

따라서 자신만의 대화형 제품 쇼케이스를 만들고 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;
}

Copy after login

제품 카드 스타일
각 카드는 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);
}

Copy after login

통계 및 진행률 표시줄
진행률 표시줄을 사용하여 방어력, 내구성 등의 속성을 표시하여 쇼케이스에 독특한 시각적 요소를 추가합니다.

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

Copy after login

입자 효과 추가
움직이고 색상을 변경하는 입자를 추가하면 몰입감이 향상됩니다. 이러한 입자는 진동하여 빛나는 효과를 줄 수 있습니다.

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

Copy after login

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

Copy after login

빛나는 입자 추가
분위기를 높이기 위해 각 제품 카드 주위를 무작위로 움직이는 입자를 만듭니다.

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

Copy after login

결론
역동적인 애니메이션과 입자 효과를 갖춘 3D 검투사 테마의 제품 쇼케이스를 구축하면 사용자의 마음을 사로잡을 수 있는 매력적인 대화형 경험을 만들 수 있습니다. 시각적 스타일을 위한 CSS와 상호 작용을 위한 JavaScript를 결합하여 제품 디스플레이 또는 게임 관련 사이트에 이상적인 고품질의 몰입형 구성 요소를 만들었습니다. Gladiators Battle에서 영감을 받은 이 쇼케이스는 현대적인 웹 디자인과 역사적인 주제를 결합한 힘을 강조합니다.

? 더 알아보기:

Explore Gladiators Battle: Dive into a world of ancient warriors and strategic gameplay at https://gladiatorsbattle.com.
GitHub: View more projects at https://github.com/HanGPIErr.
LinkedIn: Connect for updates on projects at https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter: Follow for design and development insights at https://x.com/GladiatorsBT.
Stay tuned for more tutorials on creating engaging, interactive components!

The above is the detailed content of Gladiator Product Gladiator-Themed Product Showcase with Dynamic Particles & Interactive Animations. For more information, please follow other related articles on the PHP Chinese website!