웹 개발
과제- 웹 사이트 CSS(애니메이션) 적용 하기
by 곽정우
2024. 4. 15.
1. 메인 페이지 애니메이션 적용하기
2. 메인 페이지의 애니메이션 CSS
/* !!!애니메이션 코드!!! */
@media (max-width: 700px){
.box{
width: 50%;
}
.box:nth-child(2n-1){
background-color: #fff;
}
.box:nth-child(4n),.box:nth-child(4n-3) {
background-color: #fff;
}
}
@media (max-width: 420px){
.box{
width: 100%;
}
.box:nth-child(4n),.box:nth-child(4n-3){
background-color: #fff;
}
.box:nth-child(2n-1){
background-color:rgba(0,0,0,0.05);
}
}
.hourglass{
position: relative;
height: 80px;
width: 80px;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
border: 3px solid #03c75a;
border-radius: 80px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: hourglass 2s ease-in-out infinite;
animation: hourglass 2s ease-in-out infinite;
}
.hourglass:before{
content: "";
position: absolute;
top:8px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 37px 22px 0 22px;
border-color: #03c75a transparent transparent transparent;
}
.hourglass:after{
content: "";
position: absolute;
top: 35px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 22px 37px 22px;
border-color: transparent transparent #03c75a transparent;
}
@-webkit-keyframes hourglass{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes hourglass{
0%{transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
3. 메인 페이지의 HTML body
<body>
<div class="container">
<header>
<h1 style="color: #fff;">곽정우의 홈페이지</h1> <!-- 헤더 텍스트 색상 변경 -->
</header>
<nav>
<ul>
<li><a href="news.html">뉴스</a></li>
<li><a href="favorite.html">즐겨찾기</a></li>
<li><a href="resume.html">이력서</a></li>
<li><a href="login.html">로그인</a></li>
<li><a href="regist.html">회원가입</a></li>
</ul>
</nav>
<main>
<div class="container">
<div class="box">
<div class="hourglass"></div>
</div>
<br>
<img src="./images/pic5.png" alt="이미지5">
</div>
</main>
</div>
</body>
