마우스 위, 아래 채택완료
0620lhj
1년 전
조회 11,639
왼쪽은 가만히 있고 오른쪽은 위아래로 움직이는 것을 뭐라고 불러요 가르쳐 주세요
이런 예제 있으면 더 좋고요 ^^
https://www.website.co.kr/index.php" target="_blank">웹 사이트
http://sir.kr/data/editor/2408/988537093_1723035057.2728.png" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
미니님a
Expert
1년 전
딱히 이름이 있는건 아니지만, 업다운 애니메이션이라고 칭했던 기억은 있습니다.
저건 어려운게 아니에요
그냥 div 요소에 애니메이션 효과로 transform : translateY 값만 애니메이션 주시면 저렇게 됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
미니님a
Expert
1년 전
</p>
<p><!DOCTYPE html></p>
<p><html lang="en"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta http-equiv="X-UA-Compatible" content="IE=edge"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>Document</title></p>
<p> <style></p>
<p> *{margin: 0; padding: 0;}</p>
<p> .rolling{</p>
<p> width: 100px;</p>
<p> height: 100px;</p>
<p> background-color: #eee;</p>
<p> overflow: hidden;</p>
<p> position: relative;</p>
<p> animation: scroll 1s infinite linear</p>
<p> }</p>
<p>@keyframes scroll {</p>
<p> 25%{transform: translateY(-10px);}</p>
<p> 50%{transform: translateY(-20px);}</p>
<p> 75%{transform: translateY(-10px);}</p>
<p> 100%{transform: translateY(-0px);}</p>
<p>}</p>
<p> </style></p>
<p></head></p>
<p><body></p>
<p> <div class="rolling"></div></p>
<p></body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인