HTML, CSS, jQuery: 아름다운 카드 뒤집기 효과 만들기-JS 튜토리얼-php.cn

HTML, CSS, jQuery: 아름다운 카드 뒤집기 효과 만들기

WBOY

풀어 주다： 2023-10-27 13:43:45

원래의

873명이 탐색했습니다.

HTML, CSS, jQuery: 아름다운 카드 뒤집기 효과 만들기

HTML, CSS 및 jQuery: 아름다운 카드 뒤집기 효과 만들기

웹 디자인에서 특수 효과를 적용하면 페이지의 상호 작용성과 시각적 효과를 높일 수 있습니다. 카드 뒤집기 효과는 사용자에게 더욱 생생하고 흥미로운 탐색 경험을 선사할 수 있는 일반적인 특수 효과입니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 아름다운 카드 뒤집기 효과를 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 HTML의 기본 구조를 준비해야 합니다. 두 개의 div 요소를 사용하여 카드의 앞면과 뒷면을 나타냅니다. 코드는 다음과 같습니다.

<div class="card">
  <div class="front">
    <!-- 正面内容 -->
  </div>
  <div class="back">
    <!-- 反面内容 -->
  </div>
</div>

로그인 후 복사

다음으로 CSS를 사용하여 카드 스타일을 정의합니다. 변환 속성을 사용하여 뒤집기 효과를 얻을 수 있고 전환 속성을 사용하여 부드러운 전환 애니메이션을 얻을 수 있습니다. 코드는 다음과 같습니다.

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.front {
  background-color: #ffcc00;
}

.back {
  background-color: #ff3333;
  transform: rotateY(180deg);
}

로그인 후 복사

CSS에서는 .card 요소에 원근감 효과(perspective)를 설정하여 반전 효과를 더욱 현실감 있게 만들 수 있습니다. 동시에 .front 및 .back 요소에 동일한 너비와 높이를 설정하고 뒤집을 때 깜박이는 문제를 방지하기 위해 backface-visibility 속성을 사용하여 후면 요소의 표시를 숨깁니다. 또한 .back 요소에 대한 초기 회전 각도를 설정하여 요소가 뒤로 뒤집히도록 했습니다.

마지막으로 jQuery를 사용하여 카드 뒤집기 효과를 구현합니다. click 이벤트를 사용하여 뒤집기 효과를 트리거하고ggleClass 메서드를 사용하여 앞 요소와 뒤 요소의 클래스 이름을 전환합니다. 코드는 다음과 같습니다.

$(document).ready(function() {
  $('.card').click(function() {
    $(this).toggleClass('flipped');
  });
});

로그인 후 복사

이 코드에서는 .ready() 메서드를 사용하여 후속 작업을 수행하기 전에 문서가 로드되었는지 확인합니다. .card 요소를 클릭하면 전환 클래스() 메서드를 통해 뒤집힌 클래스 이름을 전환하여 앞 요소와 뒤 요소 간에 전환합니다.

시연 효과를 더욱 분명하게 만들기 위해 앞면과 뒷면 요소에 일부 텍스트 콘텐츠와 스타일을 추가할 수 있습니다. 전체 HTML 및 CSS 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 200px;
      height: 200px;
      perspective: 1000px;
    }
    
    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: transform 0.6s;
    }
    
    .front {
      background-color: #ffcc00;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .back {
      background-color: #ff3333;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .flipped {
      transform: rotateY(180deg);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.card').click(function() {
        $(this).toggleClass('flipped');
      });
    });
  </script>
</head>
<body>
  <div class="card">
    <div class="front">
      正面内容
    </div>
    <div class="back">
      反面内容
    </div>
  </div>
</body>
</html>

로그인 후 복사

위 코드를 HTML 파일로 저장하고 브라우저로 열면 아름다운 카드 뒤집기 효과를 볼 수 있습니다. 카드를 클릭하면 부드럽게 뒷면으로 뒤집히고, 다시 클릭하면 다시 앞면으로 뒤집힙니다.

HTML, CSS 및 jQuery의 조합을 통해 웹 페이지에 매력과 상호 작용성을 추가하는 다양한 특수 효과를 쉽게 만들 수 있습니다. 이 기사의 샘플 코드가 아름다운 카드 뒤집기 효과를 구축하는 데 도움이 되기를 바랍니다.

위 내용은 HTML, CSS, jQuery: 아름다운 카드 뒤집기 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!