수업내용

[HTML, CSS] 움직이는 라네즈들과 물방울 + iframe, 카카오맵 넣기

쿨키드 2022. 7. 31. 13:08
23rd
움직이는 라네즈들과 물방울 + iframe, 카카오맵 넣기

 

👇 @keyframes과 animation, transform-origin를 활용한 움직이는 라네즈들과 물방울

라네즈공홈

https://www.laneige.com/kr/ko/index.html

 

<!DOCTYPE html>
<html lang="ko">

<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>2022.06.21_laneige</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .laneige {
            position: relative;
            padding: 150px 0;
        }

        .movie_bg {
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        video {
            width: 100%;
        }

        .case {
            position: relative;
        }

        .container {
            display: flex;
            width: 1200px;
            margin: 0 auto;
            gap: 100px;
        }


        .container figure {
            position: relative;
            flex: 1;

        }

        .container figure::after {
            position: absolute;
            content: "";
            inset: 50% auto auto 50%;
            opacity: 0;
            width: 30px;
            height: 30px;
            background: url(../img/KakaoTalk_20220621_144941902.png) no-repeat center center/cover;
            /* border-radius: 50%; */

        }

        .container figure:hover::after {
            animation: waterdrop 2s infinite linear;

        }

        .container figure img {
            /* transition: transform 0.5s;
            transform: rotate(0); */
            transform-origin: bottom center;
        }

        .container figure:hover img {
            animation: laneige 0.5s infinite;
            /* transform: rotate(-10deg); */
            transform-origin: bottom center;
        }

        @keyframes laneige {
            0% {
                transform: rotate(0)
            }

            50% {
                transform: rotate(-10deg)
            }

            75% {
                transform: rotate(5deg)
            }

            100% {
                transform: rotate(0)
            }

        }

        @keyframes waterdrop {
            0% {
                inset: 50% auto auto 50%;
                opacity: 0;
            }

            50% {
                inset: 20% auto auto 49%;
                opacity: 0.5;

            }

            100% {
                inset: 0 auto auto 53%;
                opacity: 1;
            }

        }
    </style>
</head>

<body>
    <section class="laneige">
        <div class="movie_bg">
            <video src="../img/bestseller-bg.mp4" autoplay muted playsinline></video>
        </div>
        <div class="case">
            <div class="container">
                <figure>
                    <img src="../img/20200325_final_product_cream-skin_pc.png" alt="">
                </figure>
                <figure>
                    <img src="../img/20201118_final_neo-cushion-matte_best-seller_pc.png" alt="">
                </figure>
                <figure>
                    <img src="../img/20201118_final_radian-c-cream_best-seller_pc.png" alt="">
                </figure>
            </div>
        </div>
    </section>
</body>

</html>

 

👇 iframe/카카오맵 넣기

<!DOCTYPE html>
<html lang="ko">

<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>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .inner {
            position: relative;
            height: 100px;
            padding-bottom: 56.25%;
        }

        .inner iframe {
            position: absolute;
            inset: 0 0 0 0;
        }
    </style>
</head>

<body>
    <section class="iframe">
        <div class="inner">


            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/eKe_iw28fM8"
                title="ASMR(보길도 뾰쪽산과 보옥리 공룡알해변)자연-쉼-자연의 소리-힐링스페셜. Bogildo Peak Mountain and Bookri Dinosaur Egg Beach"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </section>
</body>

</html>
<!DOCTYPE html>
<html lang="ko">

<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>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .inner {
            position: relative;
            padding-bottom: 56.25%;
            border-bottom: 2px solid green;
        }

        /* .inner iframe {
            position: absolute;
            inset: 0 0 0 0;
        } */

        .inner>.root_daum_roughmap {
            position: absolute;
            inset: 0 0 0 0;
            width: 100%;
            height: 100%;
        }

        .inner>.root_daum_roughmap .wrap_map {
            height: 100%;

        }
    </style>
</head>

<body>
    <section class="iframe">
        <div class="inner">
            <!-- - * 카카오맵 - 지도퍼가기 -->
            <!-- 1. 지도 노드 -->
            <div id="daumRoughmapContainer1655857967182" class="root_daum_roughmap root_daum_roughmap_landing"></div>

            <!--
        	2. 설치 스크립트
        	* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
        -->
            <script charset="UTF-8" class="daum_roughmap_loader_script"
                src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

            <!-- 3. 실행 스크립트 -->
            <script charset="UTF-8">
                new daum.roughmap.Lander({
                    "timestamp": "1655857967182",
                    "key": "2ap48",
                    // "mapWidth": "640",
                    // "mapHeight": "360"
                }).render();
            </script>
        </div>
    </section>
</body>

</html>