오른쪽 가장자리에서 페이드 인되고 왼쪽 가장자리에서 페이드 아웃되는 텍스트로 CSS 선택 윤곽을 만들려고 합니다. 글자의 가장자리만 투명해져야 합니다. 나는 이것을 "불투명 마스크"라고 부르고 왼쪽/오른쪽 가장자리에 페더를 적용합니다.
CSS 마퀴 코드 예제를 찾을 수 있지만 이와 같은 페이드 인/아웃 효과는 없습니다. 또한 배경은 완전히 투명하고 텍스트에만 가장자리 효과가 있기를 원합니다.
컨테이너에 그라디언트를 추가하려고 했지만 돌이켜보면 올바른 경로가 아닌 것 같습니다. 아래는 지금까지 제가 생각해낸 코드입니다. 도와주세요, 감사합니다!
@Bernard Borg: 두 번째 새로운 예제로 코드를 업데이트했습니다. 그 외에는 불투명도가 사용되지 않습니다. 따라서 A) 기본 배경색에 대한 하드코딩에 의존하고 B) 단색 배경에서만 작동합니다 - 이는 제 사용 사례에 적합합니다. 감사해요! (색상 대신 불투명도로 선택 윤곽을 오버레이하는 방법을 아시나요?)
으아악 으아악
P粉7060387412024-03-28 00:28:44
불투명도 속성에 애니메이션을 적용합니다(더 나은 가독성을 위해 코드 정리).
P粉0154020132024-03-28 00:07:04
업데이트된 질문에 가장 가까운 내용입니다.