· FRONT-END/└ CSS

[ CSS / HTML ] relative를 이용한 디자인

감자도리22 2024. 4. 15. 22:43

환경 : Visual Studio Code

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>relative를 이용한 디자인</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <link rel="stylesheet" type="text/css" href="test.css">
    <style>
        /*
            relative를 이용한 디자인
        */
        .effect-lift {
            position: relative;
            z-index: 99;
            transition: bottom 0.1s ease-out;
            bottom: 0px;
        }
        .effect-lift:hover {
            bottom: 2px;
        }

        .effect-shake {
            position: relative;
            z-index: 99; /*애니메이션이 맨 위에서 보이도록 큰 숫자를 의미적으로 부여*/
        }
        .effect-shake:hover {
            /* animation : 애니메이션이름 딜레이 타이밍 실행시간 반복횟수 [기타옵션] */
            animation: shake linear 0.15s infinite;
        }

        /* 움직임에 대한 상세한 시나리오 작성 */
        @keyframes shake {
            0% { left: 0px; }
            25% { left: -1px; }
            50% { left: 0px; }
            75% { left: 1px; }
            100% { left: 0px;}
        }
    </style>
</head>
<body>
    <div class="container w-500">
        <div class="cell center">
            <h1>relative position</h1>
        </div>

        <div class="cell">
            <img class="effect-lift" src="image/hachiware.jpg" width="100">
            <img class="effect-shake" src="image/alarm.jpeg" width="300">
        </div>
    </div>
</body>
</html>

    (+) effect-lift : 이미지 들어올리기 기능 구현

    (+) effect-shake : 이미지 흔들리게 구현

                 animation : 애니메이션이름 딜레이 타이밍 실행시간 반복횟수 [기타옵션];

                 @keyframes 에 움직임에 대한 상세한 시나리오를 작성하여 움직임을 구현. 

                               └ 보통 0/25/50/75/100%로 나누어서 움직임을 구현함

 

 

 

relative를 이용한 디자인 - Chrome 2024-02-14 14-20-10.mp4
2.42MB

움직이는게 궁금하다면.. 보십시오..

 

 

 

 

개인 공부 기록용입니다:)

 

 

 

728x90