CSS 애니메이션을 사용하여 배경 색상을 반짝이게 만드는 HTML 예제 프로그램을 만들어보겠습니다. 이 예제에서는 CSS의 @keyframes를 사용하여 배경 색상을 반복적으로 변경하여 반짝이는 효과를 만들 것입니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>반짝이는 배경</title>
</head>
<body>
<div class="blinking-bg"></div>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 반짝이는 배경의 스타일 및 애니메이션을 정의합니다.
/* styles.css */
.blinking-bg {
width: 100vw;
height: 100vh;
animation: blink 1s infinite;
}
@keyframes blink {
0% {
background-color: #3498db;
}
50% {
background-color: #e74c3c;
}
100% {
background-color: #3498db;
}
}
3. 반짝이는 배경 만들기
위의 코드를 작성하면 웹 페이지에 반짝이는 배경이 생성됩니다. .blinking-bg 클래스는 화면 전체 크기(100vw와 100vh)를 가지며, @keyframes를 사용하여 blink 애니메이션을 정의했습니다. 이 애니메이션은 배경 색상을 #3498db에서 #e74c3c로 바꾸고 다시 #3498db로 바꾸는 것을 반복합니다. 이로써 배경이 반짝이는 효과가 만들어집니다.
4. 결과
배경의 색깔이 계속 바뀌어 반짝이는 효과를 볼 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 (0) | 2023.12.05 |
|---|---|
| 레인보우 텍스트: CSS 그래디언트를 사용하여 텍스트에 레인보우 색상 적용 (0) | 2023.12.05 |
| 타자 효과: 글자 한 글자씩 나타나는 타자 효과 (0) | 2023.12.05 |
| 비밀 메시지: CSS로 텍스트 숨기고 호버(hover) 시 나타나게 하기 (0) | 2023.12.05 |
| 블링크 텍스트 만들기 (0) | 2023.12.05 |
