눈동자가 깜빡이는 효과를 만들기 위해 다음과 같은 HTML, CSS 및 JavaScript 코드를 사용할 수 있습니다.
1. 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="eye">
<div class="eyeball"></div>
</div>
<script src="script.js" defer></script>
</body>
</html>
2. CSS 코드 작성:
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.eye {
width: 100px;
height: 100px;
background-color: white;
border: 5px solid #000;
border-radius: 50%;
position: relative;
}
.eyeball {
width: 40px;
height: 40px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: blink 2s infinite alternate;
}
@keyframes blink {
0% {
height: 40px;
}
100% {
height: 10px;
}
}
3. JavaScript 코드 작성:
이 예제에서는 JavaScript 코드가 필요하지 않습니다.
위의 코드는 깜빡이는 눈동자를 만드는 예제입니다. @keyframes를 사용하여 blink 애니메이션을 정의하고, infinite와 alternate를 사용하여 깜빡임 효과를 만듭니다.
페이지를 열어 눈동자가 깜빡이는 것을 확인할 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 트위터 피드 스타일링: 트위터 피드를 모바일 앱처럼 스타일링 (0) | 2023.12.06 |
|---|---|
| 동적 테이블 정렬: JavaScript를 사용하여 동적으로 테이블 열 정렬 (0) | 2023.12.06 |
| 텍스트 애니메이션: CSS로 텍스트가 글자 하나씩 나타나는 애니메이션 (0) | 2023.12.05 |
| 게임 미로: HTML과 JavaScript로 간단한 미로 게임 만들기 (0) | 2023.12.05 |
| 이펙트 버튼: 버튼 클릭 시 이펙트와 음악 재생 (0) | 2023.12.05 |
