CSS3 흐린 텍스트 링크 효과를 만드는 방법

CSS3 및 FAQS에서 퍼지 텍스트의 효과에 대한 자세한 설명 키 포인트

CSS3은 투명한 텍스트 색상과 텍스트 그림자로 블러 텍스트 효과를 생성 할 수 있지만 모든 브라우저가 속성을 ​​지원하는 것은 아닙니다. 이 경우 ModernIzr을 사용하거나 사용자 정의 텍스트 그림자 감지 코드를 해결 방법으로 작성할 수 있습니다.

호버링 또는 초점을 맞추는 동안 링크를 부드럽게 흐리게하여 내비게이션 메뉴에 대한 즐거운 효과를 얻을 수 있습니다. 여기에는 모든 링크에 적용될 수있는 "블러"클래스를 정의한 다음 모든 브라우저에 적용 할 수있는 CSS 스타일을 사용하는 것이 포함됩니다.

흐릿한 텍스트 효과를 만들 때 접근성 및 가시성 문제에주의를 기울여야합니다. 또한, 세 번째 텍스트 섀도우 속성 (블러 양을 정의)을 조정하여 블러의 양을 제어 할 수 있습니다. 흐림 효과를 증가 시키거나 감소시키기 위해 수정할 수 있습니다.
• text-shadow 다음은 Chris Coyier의 CSS Tricks 웹 사이트에서 본 텍스트 효과의 예입니다. 블러 텍스트는 투명한 텍스트 색상과 텍스트 그림자를 적용하여 CSS3에서 생성 할 수 있습니다.
불행히도 모든 브라우저가
• 를 지원하는 것은 아닙니다. IE9 이하는 투명한 색상을 적용하지만 그림자 효과는 없습니다. 텍스트는 보이지 않습니다. 우리는 Modernizr로 돌아가거나 우리 자신의 텍스트 그림자 감지 코드를 작성해야합니다. 다음 JavaScript 코드는 브라우저가 지원할 때 "TextShadow"클래스를 HTML 요소에 첨부합니다. 따라서 ".textshadow .Blur-text"의 CSS 선택기를 사용하여 효과가 나쁜 동작을 일으키지 않는 경우에만 적용되는지 확인할 수 있습니다.
경고 :

Opera의 퍼지 동작 Chrome 및 Firefox는 퍼지 텍스트를 표시하지만 IE에서는 비활성화됩니다. 그러나 오페라는 이상 할 수 있지만 투명한 텍스트에 적용하고 싶지 않습니다.

의 색상을 적용하면 문제가 해결되기 때문에 이것은 실수 인 것 같습니다.

퍼지 링크

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

추가 CSS3 마술을 사용하면 호버링하거나 초점을 맞출 때 링크가 부드럽게 흐려지고 나올 수 있습니다. 이것은 내비게이션 메뉴에 유쾌한 효과가 될 수 있습니다. 우리는 모든 링크에 적용될 수있는 "Blur"클래스 (또는 "Blur in"클래스)를 정의합니다. 링크는 Blur로 시작하여 활성화되면 정상 초점으로 돌아갑니다. 마찬가지로, 우리는 호버링/포커스 할 때 텍스트를 흐리게하는 "블러 아웃"클래스를 정의합니다.

이제 우리는 이제 모든 브라우저에 적용되는 기본 CSS 스타일이 필요합니다. 다음 스타일 세트는 초점이 있는지 여부에 관계없이 모든

요소에 적용됩니다.

우리는 링크 밑줄을 제거하고 개요
• 텍스트 색상을 투명하고
로 설정하십시오 텍스트 그림자와 전체 텍스트 그림자 사이에 부드럽게 애니메이션하는 CSS3 전환을 적용합니다. 이 효과는 100 밀리 초 후에 시작되며 400 밀리 초 후에 완료됩니다.
• 마지막으로, 우리는 두 개의 텍스트 그림자 상태를 정의합니다. 세 번째 텍스트 섀도우 속성은 "퍼지 금액"을 정의합니다. 그것은 0에서 4px 사이의 애니메이션이지만, 약간의 흐림이 필요한 경우 다음을 수정할 수 있습니다.
링크 퍼지 데모 페이지보기 - 소스 코드에는 필요한 모든 CSS 및 JavaScript가 포함되어 있습니다. 유용하다는 것을 알기를 바랍니다. 그러나이 효과를 사용할 때 접근성/가시성 문제에주의하십시오. 다른 곳에서 사용하면 귀하의 의견을 받고 URL을 게시하고 싶습니다.

CSS3의 퍼지 텍스트 효과에 대한 FAQ

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

(FAQ 부품은 너무 길고 원래 콘텐츠에 대해 반복적이기 때문에 여기서 생략됩니다. FAQ는 필요에 따라 선택적으로 유지 또는 재구성 될 수 있으며보다 간결한 언어로 다시 작성할 수 있습니다.)

>.

위 내용은 CSS3 흐린 텍스트 링크 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!