무한 회전 로고를 만들기 위해서는 CSS 애니메이션을 사용할 수 있습니다. 다음은 무한 회전 로고를 만드는 예제 코드입니다.
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="logo"></div>
</body>
</html>
CSS 스타일 시트(styles.css)를 생성하고 다음 코드를 추가하세요.
/* styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.logo {
width: 100px;
height: 100px;
background: url('logo.png') center/contain no-repeat; /* 로고 이미지 경로를 지정하세요 */
animation: rotate 4s linear infinite; /* 회전 애니메이션 설정 */
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
로고 이미지 파일(logo.png)을 프로젝트 폴더에 추가하거나 원하는 이미지로 대체하세요.
이렇게 하면 로고가 무한히 회전하는 애니메이션 효과가 적용된 웹 페이지가 생성됩니다. 로고 이미지(logo.png)는 원하는 로고 이미지로 대체하실 수 있습니다.
위 코드에서 animation 속성을 사용하여 로고에 회전 애니메이션을 적용하였습니다. @keyframes 규칙을 사용하여 회전 애니메이션의 시작과 끝을 정의하고, rotate 애니메이션을 .logo 요소에 적용하였습니다. 이로써 로고는 무한히 회전하게 됩니다.
'HTML 예제' 카테고리의 다른 글
| 웹 캐러셀: 이미지 슬라이드 쇼와 버튼으로 제어하는 웹 캐러셀 (0) | 2023.12.06 |
|---|---|
| 타자 연습 게임: JavaScript로 타자 연습 게임 만들기 (1) | 2023.12.06 |
| 스크롤링 텍스트: CSS 스크롤링 텍스트 효과 (0) | 2023.12.06 |
| 404 오류 페이지: 404 오류 페이지를 유쾌하게 디자인 (0) | 2023.12.06 |
| 날씨 앱 디자인: 실제 날씨 정보를 가져와 표시하는 날씨 앱 스타일 페이지 (0) | 2023.12.06 |
