가변 텍스트 길이를 처리하는 반응형 선택 윤곽 효과를 어떻게 만들 수 있나요?

<p>

마키 효과: 길이 가변성 난제 해결

<p>이 시나리오에서는 동적 텍스트 길이로 마키 효과를 만들기 위해 노력합니다. 전통적으로 이는 "margin-left"와 같은 CSS 속성에 대한 특정 값을 사용하여 달성되었습니다. 그러나 다양한 길이의 텍스트로 작업할 때는 이 접근 방식이 부족합니다.

<p>다행히도 이러한 제한에서 벗어나는 솔루션이 있습니다. HTML을 약간 조정하고 단락 내에 범위 요소를 추가하여 보다 적응력이 뛰어난 솔루션을 잠금 해제합니다.

<p>

<p>다음으로 "marquee" 및 "span" 클래스 모두에 대한 CSS 규칙을 정의합니다. . "marquee" 클래스는 단락의 너비와 스타일을 정의하고 "span" 클래스는 텍스트 애니메이션을 처리합니다.

.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;
}

<p>이러한 "너비" 및 "왼쪽 패딩" 조정을 통해 선택 윤곽이 다음과 같이 허용됩니다. 다양한 길이의 텍스트를 수용하여 내용이 잘리지 않고 부드럽게 스크롤되도록 합니다.

<p>그러나 마지막으로 해결해야 할 한 가지 미묘한 차이가 있습니다. 바로 접근성과 사용자입니다. 환경 설정. 모션 감소를 선호하는 사용자를 위해 미디어 쿼리 규칙을 적용하여 애니메이션 동작을 조정합니다. 이렇게 하면 마키가 사용자의 기본 설정을 존중하게 됩니다.

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

<p>이러한 변경 사항을 구현함으로써 사용자 기본 설정을 존중하는 동시에 텍스트 길이에 우아하게 적응하는 마키 효과를 얻을 수 있습니다.

위 내용은 가변 텍스트 길이를 처리하는 반응형 선택 윤곽 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!