메뉴를 구성하다보면 에니매이션이 들어간 메뉴들이 뭔가 세련되어 보이고 멋져보이기도 하는데요.
아래 링크와 같이 메뉴에 마우스를 올리면 나타나는 애니메이션 효과를 적용하려고 하는데요.
참고할 만한 사이트가 있으면 고수님들의 조언부탁드립니다.
|
답변 3개
채택된 답변
+20 포인트
행복중입니다아래코드를 응용하여 사용해 보세요^^
아래에서 위로 애니메이션을 주도록 만들어봤습니다.
Copy
<style>
div {
transform-origin: 0 100%;
width: 100px;
height: 100px;
background: #ff6666;
transition: transform .5s;
transform: scaleY(0);
}
body:hover div {
transform: scaleY(1);
}
</style>
</head>
<body>
<div>
<table border='1'>
<tr>
<td>웹디자인1</td>
</tr>
<tr>
<td>웹디자인2</td>
</tr>
<tr>
<td>웹디자인3</td>
</tr>
</table>
</div>
</body>
2022-01-12 (수) 10:58:22
exception트랜지션 밖에 없는거같은데,,
개인적으로는 보통 부트스트랩쪽 테마나 템플릿몬스터쪽을 보며 참고합니다
답변을 작성하려면 로그인이 필요합니다.