텍스트 아트 쇼케이스: 검투사 전투 ⚔️-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

텍스트 아트 쇼케이스: 검투사 전투 ⚔️

Barbara Streisand

Nov 27, 2024 pm 06:12 PM

Text Art Showcase: Gladiators Battle ⚔️

멋진 3D 텍스트 아트와 고도로 대화형이며 몰입도가 높은 웹 경험을 결합하는 방법이 궁금하신가요? 이 프로젝트는 플레이어가 장엄한 검투 경기장에서 수집하고 전투하고 정복하는 브라우저 기반 카드 게임인 Gladiators Battle에서 우리가 어떻게 이를 달성했는지 보여줍니다.

창의적인 도전의 일환으로 제작된 이 프로젝트는 고급 CSS 애니메이션, JavaScript 상호 작용 및 3D 효과를 선보여 잊지 못할 경험을 선사합니다. 영감을 원하는 개발자이든 검투사 팬이든 이 쇼케이스는 여러분의 마음을 사로잡을 것입니다!

✨ 마법 미리보기

데모를 방문하면 다음과 같은 경험을 하게 됩니다.

마우스 입력에 동적으로 반응하는 회전하는 3D 텍스트 아트 디자인
마법적인 상호작용 요소를 추가하는 떠다니는 입자.
커서를 따라가는 대화형 빛나는 효과로 시각적 효과가 향상됩니다.
Gladiators Battle 홈페이지로 연결되는 반응형 클릭 유도 버튼

? CodePen에서 라이브 데모를 확인하세요

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

? 디자인의 비하인드

이 프로젝트는 HTML, CSS, JavaScript라는 세 가지 핵심 프런트엔드 기술을 사용하여 구축되었습니다. 모든 것이 하나로 합쳐지는 방법은 다음과 같습니다.

HTML 구조

구조가 간단하고 따라하기 쉽습니다.

모든 3D 및 인터랙티브 요소를 담는 컨테이너입니다.
글래디에이터즈 배틀을 돋보이게 하는 브랜드용 로고
사용자가 게임을 방문하고 플레이하도록 유도하는 CTA(Call-to-Action)입니다.
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;
}

로그인 후 복사

CodePen 프로젝트에서 전체 CSS를 찾아보세요.

자바스크립트 상호작용

JavaScript는 페이지에 생명을 불어넣습니다.

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.

로그인 후 복사

주요 JavaScript 하이라이트:

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

로그인 후 복사

CodePen 프로젝트에서 전체 JavaScript 코드를 찾아보세요.

⚔️ 검투사들은 왜 전투를 벌이는가?

Gladiators Battle은 단순한 게임이 아니라 전략과 모험이 가득한 세계입니다. 기대할 수 있는 사항은 다음과 같습니다.