답변 3개
채택된 답변
+20 포인트
1년 전
딱히 이름이 있는건 아니지만, 업다운 애니메이션이라고 칭했던 기억은 있습니다.
저건 어려운게 아니에요
그냥 div 요소에 애니메이션 효과로 transform : translateY 값만 애니메이션 주시면 저렇게 됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
Copy
<!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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인