navbar 애니메이션
관련링크
본문
메뉴를 구성하다보면 에니매이션이 들어간 메뉴들이 뭔가 세련되어 보이고 멋져보이기도 하는데요.
아래 링크와 같이 메뉴에 마우스를 올리면 나타나는 애니메이션 효과를 적용하려고 하는데요.
참고할 만한 사이트가 있으면 고수님들의 조언부탁드립니다.
답변 3
아래코드를 응용하여 사용해 보세요^^
아래에서 위로 애니메이션을 주도록 만들어봤습니다.
<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>
트랜지션 밖에 없는거같은데,,
개인적으로는 보통 부트스트랩쪽 테마나 템플릿몬스터쪽을 보며 참고합니다
답변을 작성하시기 전에 로그인 해주세요.