마우스 위, 아래
관련링크
http://웹사이트
81회 연결
본문
답변 3
딱히 이름이 있는건 아니지만, 업다운 애니메이션이라고 칭했던 기억은 있습니다.
저건 어려운게 아니에요
그냥 div 요소에 애니메이션 효과로 transform : translateY 값만 애니메이션 주시면 저렇게 됩니다.
제가 잘 몰라서 죄송합니다 ㅠㅠ 예제를 하나 줄 수 없나요 꾸벅 ^^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
.rolling{
width: 100px;
height: 100px;
background-color: #eee;
overflow: hidden;
position: relative;
animation: scroll 1s infinite linear
}
@keyframes scroll {
25%{transform: translateY(-10px);}
50%{transform: translateY(-20px);}
75%{transform: translateY(-10px);}
100%{transform: translateY(-0px);}
}
</style>
</head>
<body>
<div class="rolling"></div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.