하드코딩된 값 없이 반응형 CSS3 선택 윤곽 효과를 어떻게 만들 수 있나요?

CSS3의 마키 효과: 텍스트 적용을 위한 특정 값 피하기

CSS3 애니메이션에서는 텍스트가 포함된 마키 효과를 만드는 것이 바람직한 경우가 많습니다. 화면을 스크롤합니다. 그러나 "margin-left: -4200px;"와 같은 특정 값을 사용하면 텍스트 들여쓰기는 다양한 텍스트 길이에 대해 제한적일 수 있습니다.

이 문제를 방지하는 한 가지 방법은 텍스트를 범위 요소로 감싸고 대신 "padding-left" 속성을 사용하는 것입니다.

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%; /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

이를 통해 애니메이션이 텍스트 너비에 맞춰 화면 전체에서 완전히 스크롤되도록 할 수 있습니다. 또한 "hover" 상태를 사용하면 사용자가 텍스트 위로 마우스를 가져갈 때 애니메이션을 일시 중지할 수 있습니다.

.marquee span:hover {
  animation-play-state: paused;
}

마지막으로 사용자 기본 설정을 존중하기 위해 이 코드는 "prefers-reduced-motion" 미디어를 구현합니다. 움직임을 덜 선호하는 사용자를 위해 애니메이션 속도를 줄이거나 완전히 비활성화하는 쿼리입니다.

위 내용은 하드코딩된 값 없이 반응형 CSS3 선택 윤곽 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!