마우스 위, 아래 채택완료
왼쪽은 가만히 있고 오른쪽은 위아래로 움직이는 것을 뭐라고 불러요 가르쳐 주세요
이런 예제 있으면 더 좋고요 ^^
https://www.website.co.kr/index.php" target="_blank">웹 사이트
http://sir.kr/data/editor/2408/988537093_1723035057.2728.png" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
Expert
1년 전
딱히 이름이 있는건 아니지만, 업다운 애니메이션이라고 칭했던 기억은 있습니다.
저건 어려운게 아니에요
그냥 div 요소에 애니메이션 효과로 transform : translateY 값만 애니메이션 주시면 저렇게 됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
답변대기
채택
채택
답변대기
채택
답변대기
채택
답변대기
채택