CSS를 이용한 깜빡이는 플래시 텍스트
CSS 24.02.01CSS 애니메이션을 사용하여 깜빡이는 효과를 만들려면 키프레임을 사용할 수 있습니다. 아래는 깜빡이는 글씨 효과를 주는 간단한 CSS 코드의 예시입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .blinking-text { animation: blink 1s infinite; /* 1초 간격으로 무한 반복 */ } | cs |
이 코드에서 @keyframes는 키프레임을 정의하는 부분이며, blinking-text 클래스를 가진 요소에 animation 속성을 사용하여 blink 키프레임을 1초 간격으로 무한 반복하도록 설정합니다.
HTML에서는 다음과 같이 사용할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .blinking-text { animation: blink 1s infinite; /* 1초 간격으로 무한 반복 */ } </style> <title>Blinking Text</title> </head> <body> <p class="blinking-text">Hello, I'm blinking!</p> </body> </html> | cs |
이 코드를 사용하면 "Hello, I'm blinking!" 텍스트가 깜빡이는 효과를 갖게 됩니다.
animation 속성의 값을 조절하여 원하는 속도나 반복 횟수 등을 설정할 수 있습니다.
See the Pen css를 이용한 플래시 텍스트 by designkits (@designkits) on CodePen.