CSS의 Viewport 주변 요소를 바운스합니다

이 CSS 전용 애니메이션은 스크린 세이버 또는 Pong 게임을 모방하여 튀는 요소 효과를 만듭니다. 키는 뷰포트 장치 ( vw 및 vh )와 calc() 사용하여 크기에 관계없이 브라우저 창 내에서 요소의 움직임을 동적으로 결정하는 것입니다. 애니메이션은 X와 Y 축을 부모와 자식 요소의 별도 애니메이션으로 영리하게 분리하여 독립적 인 방향 반전과보다 자연스러운 바운스를 허용합니다.

원래 코드는 부모와 자식의 두 가지 중첩 된 div를 사용합니다. 부모는 수평 운동을 처리하고 아이는 수직 운동을 처리합니다. 이를 통해 X 및 Y 바운스를 독립적으로 제어 할 수 있습니다.

코드의 분석은 다음과 같습니다.

HTML 구조 :

<div class="container">
  <div class="bouncer"></div>
</div>

CSS 스타일링 :

CSS는 더 나은 제어 및 가독성을 위해 사용자 정의 속성 (변수)을 사용합니다.

 : 루트 {
  -width : 100px; / * 튀는 요소의 크기 */
  -x- 속도 : 13s; / * 수평 애니메이션 속도 */
  --y- 속도 : 7S; / * 수직 애니메이션 속도 */
  -전환 속도 : 2.2S; / * 부드러운 바운스를위한 전환 속도 */
}

.Container { / * 수평 이동을위한 부모 요소 * /
  애니메이션 : x var (-x- 속도) 선형 무한 대안;
}

.Bouncer { / * 수직 운동을위한 자식 요소 * /
  너비 : var (-너비);
  높이 : var (-너비);
  배경색 : #007bff; / * 예제 색상 */
  국경-라디우스 : 50%; / * 원으로 만듭니다 */
  애니메이션 : Y var (-y-y- 속도) 선형 무한 대안;
  / * 부드러운 바운스를 위해 전환 추가 */
  전환 : 변환 var (-전환 속도) Ease-in-out;
}

@keyframes x {
  100% {
    변환 : translatex (calc (100vw- var (-width));
  }
}

@keyframes y {
  100% {
    변환 : translatey (calc (100vh- var (-Width));
  }
} 

이 접근법은 코드를 간결하고 효율적으로 유지하면서 JavaScript의 필요성을 피합니다. animation 속성의 alternate 키워드는 애니메이션 방향을 자동으로 뒤집어 튀는 효과를 만듭니다. calc() 함수는 요소가 뷰포트의 가장자리로 바운스를 보장하여 다른 화면 크기로 동적으로 조정됩니다. .bouncer 클래스에 transition 속성을 추가하면 바운스 방향 사이의 부드러운 전환을 제공합니다. --x-speed , --y-speed 및 --width 변수를 조정하면 애니메이션 속도와 크기를 사용자 정의 할 수 있습니다.

위 내용은 CSS의 Viewport 주변 요소를 바운스합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!