▶ 문제🔎
1. 마우스 올리면 검은 메뉴 우측 이동
2. 마우스 올리면 우측에 있던 Menu 글자는 가운데로
3. 마우스 올리면 Item 글자는 (1) 우측 이동 (2) 살짝 비틀기 (3) 좌측이동
⭐ 검은메뉴, Menu는 one-way니까 transition이용
⭐ Item글자만 @keyframes 이용
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta chatset="UFT-8">
<title>Document</title>
<link href="layout.css" rel="stylesheet">
</head>
<body>
<!-- 모든 요소 맨 앞에 존재하는 건 <body>밑에 바로 적기 -->
<nav class="ani-navbar">
<h3>Menu</h3>
<p>Item</p>
</nav>
<button class="ani-btn">흔들버튼</button>
<h3 class="ani-plus">+</h3>
</body>
</html>
[CSS]
/*버튼 */
.ani-btn {
padding: 10px;
background-color: skyblue;
color: white;
border: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
/* 가운데 정렬 */
display: block;
margin: 20px auto;
}
.ani-btn:hover {
animation-name: shake;
animation-duration: 0.5s;
animation-iteration-count: 2;
/* iteration은 반복 횟수 */
}
@keyframes shake{
0% {
transform: translateX(0deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: translateX(0deg);
}
}
/* +기호 */
.ani-plus {
margin: 10px;
font-size: 50px;
text-align: center;
cursor: pointer;
}
.ani-plus:hover {
animation-name: 회전후커지기;
animation-duration: 0.5s;
animation-fill-mode: forwards;
/* fill-mode는 마지막 상태 유지 */
}
@keyframes 회전후커지기 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
100% {
transform: rotate(45deg) scale(2);
}
}
/* 왼쪽 바 */
.ani-navbar {
width: 200px;
height: 100%;
background: black;
color: white;
padding: 20px;
/* 모든 요소 앞에 존재하게 : fixed */
position: fixed;
top: 0;
left: 0;
/* 초기 화면 */
transform: translateX(-100px);
text-align: right;
/* 서서히 움직이게 */
transition: all 1s;
}
.ani-navbar:hover {
transform: translateX(0px);
text-align: center;
}
.ani-navbar:hover p {
animation-name: slide;
animation-duration: 1s;
}
@keyframes slide {
0% { transform: translateX(-250px); }
50% { transform: translateX(20px) skew(-30deg);}
100% { transform: translateX(0px);}
}': ) Web > 웹 스터디' 카테고리의 다른 글
| [HTML, CSS] [실습] CSS Grid로 레이아웃 만들기 (grid-column, grid-row이용) (0) | 2023.12.15 |
|---|---|
| [HTML, CSS] CSS Grid 레이아웃 만들기 (0) | 2023.12.15 |
| [HTML, CSS] navbar에서 위쪽 여백 없애기 (0) | 2023.12.15 |
| [HTML, CSS] [실습] transform & animation으로 애니메이션 만들기 (0) | 2023.12.15 |
| [HTML, CSS] [이론] transform & animation으로 애니메이션 만들기 (0) | 2023.12.15 |
