CSS3 애니메이션으로 반응형 선택 윤곽 효과를 만드는 방법은 무엇입니까?

CSS3 애니메이션으로 반응형 선택 윤곽 효과를 만들려면 어떻게 해야 하나요?

CSS3 애니메이션은 웹사이트 요소에 모션을 추가하는 강력한 방법을 제공합니다. 가장 일반적인 응용 프로그램 중 하나는 텍스트가 화면 전체를 스크롤하는 선택 윤곽 효과입니다. 그러나 모든 길이의 텍스트에 적용되는 선택 윤곽 효과를 만드는 것은 어려울 수 있습니다.

이전 시도

선택 윤곽 효과를 만드는 기존 접근 방식은 margin-left:-4200px와 같은 고정 값에 의존하는 경우가 많습니다. . 이는 특정 텍스트 크기에 작동하지만 텍스트 길이가 다양하면 문제가 됩니다.

접근 방식 조정

단락 내에 범위가 중첩되어 약간 수정된 마크업을 활용하면 더 많은 작업이 가능해집니다. 반응형 솔루션. 업데이트된 접근 방식은 다음과 같습니다.

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;

  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

이 접근 방식에서는 범위의 너비가 "max-content"로 설정되어 텍스트 길이에 맞게 조정됩니다. 왼쪽 여백은 텍스트를 가시 영역 밖으로 이동하는 데 사용되며 애니메이션은 텍스트를 다시 보기로 변환하여 선택 윤곽 효과를 만듭니다.

사용자 기본 설정 존중

접근성 문제를 위해 코드는 모션에 관한 사용자 선호도를 존중합니다. 사용자가 움직임 감소를 선호하는 경우 애니메이션이 비활성화됩니다.

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01s;
    width: auto;
    padding-left: 0;
  }
}

이러한 기술을 통합하면 모든 양의 텍스트에 적응하는 반응형 선택 윤곽 효과를 만들어 디자인 유연성과 접근성을 향상시킬 수 있습니다.

위 내용은 CSS3 애니메이션으로 반응형 선택 윤곽 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!