JavaScript나 전환 없이 CSS3로 깜박임 효과를 어떻게 만들 수 있나요?

CSS3을 사용하여 전환 없이 애니메이션 깜박임

질문:

JavaScript나 텍스트 장식을 사용하지 않고 텍스트를 깜박일 수 있나요? 고전적인 연속 전환 없이 태그를 사용하시겠습니까?

답변:

기존 브라우저의 태그는 80%의 듀티 사이클을 가졌습니다. 이는 태그가 80%의 시간 동안 표시되고 20% 동안 숨겨져 있음을 의미합니다. 다음은 이 동작을 밀접하게 복제하여 텍스트에만 영향을 미치는 CSS 솔루션입니다.

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

사용법:

This is <span class="blink">blinking</span> text.

위 내용은 JavaScript나 전환 없이 CSS3로 깜박임 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!