CSS를 사용하여 텍스트가 글자 하나씩 나타나는 애니메이션을 만들어보겠습니다. 이것은 "타자 효과" 또는 "글자 애니메이션"이라고도 불립니다.
1. HTML 파일 생성하기
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="text-animation">
<h1>Hello, World!</h1>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장하세요. 스타일 시트에서 텍스트 애니메이션의 초기 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.text-animation {
text-align: center;
}
h1 {
font-size: 36px;
color: transparent;
background-image: linear-gradient(45deg, #3498db, #e74c3c, #1abc9c);
background-clip: text;
-webkit-background-clip: text;
animation: revealText 2s ease-in-out forwards;
opacity: 0;
}
@keyframes revealText {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
3. JavaScript 파일 생성하기 (선택 사항)
이 텍스트 애니메이션은 JavaScript를 사용하지 않고 CSS만으로 구현됩니다. 따라서 JavaScript 파일은 필요하지 않습니다.
4. 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. 페이지에 "Hello, World!" 텍스트가 글자 하나씩 나타나는 애니메이션 효과가 적용됩니다.
'HTML 예제' 카테고리의 다른 글
| 동적 테이블 정렬: JavaScript를 사용하여 동적으로 테이블 열 정렬 (0) | 2023.12.06 |
|---|---|
| 깜빡이는 눈동자: CSS 애니메이션으로 눈동자 깜빡임 효과 (0) | 2023.12.06 |
| 게임 미로: HTML과 JavaScript로 간단한 미로 게임 만들기 (0) | 2023.12.05 |
| 이펙트 버튼: 버튼 클릭 시 이펙트와 음악 재생 (0) | 2023.12.05 |
| 레인보우 그래디언트 배경: CSS로 페이지 전체에 레인보우 그래디언트 배경 생성 (0) | 2023.12.05 |
