I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS로 마우스 올리면 객체를 아래로 움직이게 하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 3. 3. 17:12

반응형

[즐거'웅'코드] 목차

  1. CSS
  2. 예제 소스
  3. 구현 예시
CSS
1
2
3
4
5
 
<style>
    .test_obj:hover {
        transform: translateY(50px);
    }
</style>
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="test_obj"></div>
  
<style>
    .test_obj {
        display: block;
        width: 200px;
        height: 200px;
        transition: all 0.3s ease-out;
        background-color: #414144;
    }
  
    .test_obj:hover{
        transform: translateY(50px);
    }
</style>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) CSS로 마우스 올리면 객체를 오른쪽으로 움직이게 하기  (0) 2021.03.05
(즐거웅코드) CSS로 마우스 올리면 객체를 왼쪽으로 움직이게 하기  (0) 2021.03.04
(즐거웅코드) CSS로 마우스 올리면 객체를 위로 움직이게 하기  (0) 2021.03.02
(즐거웅코드) 제이쿼리 text 내용 바꾸기  (0) 2021.01.13
(즐거웅코드) 자바스크립트 prompt(입력창) 띄워서 입력 내용 변수에 담기  (0) 2020.04.07

관련글

댓글 0

티스토리툴바