마우스 위, 아래

마우스 위, 아래

QA

마우스 위, 아래

답변 3

본문

왼쪽은 가만히 있고 오른쪽은 위아래로 움직이는 것을 뭐라고 불러요 가르쳐 주세요

이런 예제 있으면 더 좋고요 ^^

 

웹 사이트

988537093_1723035057.2728.png

이 질문에 댓글 쓰기 :

답변 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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 773
© SIRSOFT
현재 페이지 제일 처음으로