CSS 애니메이션을 사용하여 간단한 HTML 코드를 만들어보겠습니다. 이 예제는 HTML과 CSS를 사용하여 원이 확대/축소되는 애니메이션을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 애니메이션 사용</title>
<style>
/* 애니메이션 스타일 */
.circle {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
animation: scale 2s infinite alternate; /* scale 애니메이션 적용 */
}
/* 애니메이션 키프레임 정의 */
@keyframes scale {
0% {
transform: scale(1); /* 시작 스케일 */
}
100% {
transform: scale(1.5); /* 최종 스케일 */
}
}
</style>
</head>
<body>
<h1>CSS 애니메이션 사용</h1>
<!-- 애니메이션 적용된 원 -->
<div class="circle"></div>
</body>
</html>
이 코드에서는 .circle 클래스를 가진 원에 scale 애니메이션을 적용하여 원이 1배에서 1.5배로 확대/축소되는 효과를 만듭니다. @keyframes를 사용하여 애니메이션의 키 프레임을 정의하고, animation 속성을 통해 애니메이션을 적용합니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 간단한 메뉴 디자인 (0) | 2023.12.07 |
|---|---|
| 사진 크기 조절하기 (0) | 2023.12.07 |
| 화면에 특수 효과 추가 (0) | 2023.12.07 |
| 간단한 슬라이더 만들기 (0) | 2023.12.07 |
| 사용자 입력을 그래프로 표시 (0) | 2023.12.07 |
