CSS3로 양방향 깜박이는 텍스트를 어떻게 만들 수 있나요?

CSS 3으로 양방향 깜박이는 텍스트 구현

현재 코드인 @-webkit-keyframes 깜박이 {...}는 단방향 깜박이는 결과를 가져옵니다. 텍스트 요소가 깜박입니다. 텍스트가 페이드 아웃되었다가 다시 인되는 양방향 효과를 얻으려면 다음과 같이 애니메이션 키프레임을 조정하세요.

.waitingForConnection {
-webkit-animation-name:blinker;
-webkit-animation -반복 횟수: 무한;
-webkit-animation-timing-함수: 입방 베지어(.5, 0, 1, 1);
-webkit-animation-duration: 1.7s;
}

@-webkit-keyframes 깜박이는 {
{ 불투명도: 1.0; }
50% { 불투명도: 0; }
~{ 불투명도: 1.0; }
}

이 조정은 불투명도를 50% 지점에서 1.0에서 0으로 설정하여 텍스트를 효과적으로 페이드 아웃시킵니다. 그런 다음 애니메이션은 불투명도를 다시 1.0으로 되돌려 원하는 양방향 깜박임 효과를 만듭니다. 깜박이는 간격과 지속 시간은 @-webkit-keyframes 규칙의 값을 조정하여 맞춤 설정할 수 있습니다.

위 내용은 CSS3로 양방향 깜박이는 텍스트를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!