마우스 위, 아래

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
마우스 위, 아래

QA

마우스 위, 아래

본문

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

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

 

웹 사이트

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>
답변을 작성하시기 전에 로그인 해주세요.
전체 0
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT