이번에는 animation을 넣어보기로 했다.
고양이가 움직이는 모습을 넣고 싶었는데 이미지 찾기도 쉽지 않아서 만족스럽지는 못하다...
홈 페이지 화면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>김원진의 홈페이지</title>
<style>
@font-face {
font-family: 'TTLaundryGothicB';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
* { font-family: 'TTLaundryGothicB'; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; color: gray; }
a:hover { text-decoration: underline; }
body {
text-align: center;
background-image: url(./index배경.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
h2 { font-size: 50px; }
}
.cat {
width: 100px;
height: 150px;
background-image: url(./cat1-removebg-preview.png);
background-repeat: no-repeat;
background-size: cover;
animation-name: moving;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes moving {
0% {
size: 200px;
margin: 0;
opacity: 0.5;
transform: tanslate();
}
25% {
background-image: url(./cat2-removebg-preview.png);
width: 100px;
height: 150px;
margin: 0 20%;
opacity: 1;
transform: translate();
}
50% {
background-image: url(./cat3-removebg-preview.png);
width: 100px;
height: 200px;
margin: 0 48%;
opacity: 1;
transform: translate();
}
100% {
background-image: url(./cat4-removebg-preview.png);
width: 100px;
margin: 0 80%;
opacity: 1;
transform: translate();
}
}
</style>
</head>
<body>
<p><a href="./login.html">로그인</a> <a href="./regist.html">회원가입</a></p>
<h2>김원진의 홈페이지</h2>
<p>환영합니다!</p>
<img src="./github.png" alt=""><br><br><br>
<a href="./news.html"><img src="./축구.png" alt="축구" width="20" height="20">스포츠 뉴스(축구)</a><br><br>
<a href="./favorite.html"><img src="./star.png" alt="즐겨찾기" width="20" height="20">즐겨찾기</a><br><br>
<a href="./resume.html"><img src="./이력서 이미지.png" alt="이력서" width="20" height="20">이력서</a>
<div class="cat">
</div>
<p>출처 <a href="출처 <a href="https://kr.freepik.com/free-vector/hand-drawn-animals-silhouette-set_29975490.htm#query=%EA%B3%A0%EC%96%91%EC%9D%B4%20%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8&position=28&from_view=keyword&track=ais&uuid=a1f6d390-202c-4f99-b6d6-80d18bbbde3b">Freepik</a>(고양이 이미지)</a></p>
</body>
</html>
'Web' 카테고리의 다른 글
| 나만의 웹 사이트 꾸미기..? 4 (0) | 2024.04.14 |
|---|---|
| 나만의 웹 사이트 꾸미기..? 3 (0) | 2024.04.11 |
| 나만의 웹 사이트 꾸미기..? 2 (2) | 2024.04.10 |
| 나만의 웹 사이트 꾸미기..? 1 (0) | 2024.04.05 |