화면에 움직이는 객체를 추가하는 간단한 HTML과 CSS 코드를 제공합니다.
이 코드는 움직이는 네모 상자를 화면에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>화면에 움직이는 객체 추가</title>
<style>
/* 움직이는 객체 스타일 */
.moving-object {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
animation: move 2s linear infinite;
}
/* 움직임 애니메이션 정의 */
@keyframes move {
0% { left: 0; }
50% { left: 50%; }
100% { left: 0; }
}
</style>
</head>
<body>
<h1>화면에 움직이는 객체 추가</h1>
<!-- 움직이는 객체 -->
<div class="moving-object"></div>
</body>
</html>
위 코드에서는 .moving-object 클래스를 가진 움직이는 객체를 만들고, CSS를 사용하여 해당
객체의 스타일 및 애니메이션을 정의합니다. @keyframes를 사용하여 move 애니메이션을 정의하고,
animation 속성을 통해 애니메이션을 적용합니다.
'HTML 예제' 카테고리의 다른 글
| 간단한 메일 폼 (1) | 2023.12.08 |
|---|---|
| 파이 차트 만들기 (1) | 2023.12.08 |
| 간단한 블로그 형식 (1) | 2023.12.08 |
| 동적으로 이미지 변경 (1) | 2023.12.08 |
| 사용자 정보 입력 받기 (0) | 2023.12.07 |
