카테고리 없음

하트 딸랑딸랑

psys 2020. 6. 29. 09:28
728x90

왔다갔다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myHeart {
            overflow:visible;
            position: relative;
            top:100px;
            left:300px;
            width:170px;
            height: 430px;
           /* border: 1px solid black; */
        }
        /*#ball {
            position:relative;
            z-index:100;
            top:-25px;
            left:60px;
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: pink;
        }*/
        #bar {
            position: relative;
            top:-50px;
            left: 75px;
            width:20px;
            height:300px;
            background-color: orange;
        }
        #heart {
            width:150px;
            height:150px;
            left:9px;
            top:-100px;
            position:relative;
          /*  border:5px dashed magenta; */
            transform: rotate(45deg);
        }
        #tcircle{
            position: absolute;
            left:50px;
            width:100px;
            height:100px;
            background-color:orangered;
            border-radius: 50%;
        }
        #lcircle {
            position:absolute;
            top:50px;
            width:100px;
            height:100px;
            background-color:orangered;
            border-radius: 50%;
        }
        #nemo {
            position:absolute;
            left:50px;
            top:50px;
            width:100px;
            height:100px;
            background-size: 100px 100px;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div id="myHeart">
        <!-- <div id="ball"></div> -->
        <div id="bar"></div>
        <div id="heart">
            <div id="tcircle"></div>
            <div id="lcircle"></div>
            <div id="nemo"></div>
        </div>
    </div>
    <script>
        var v_myHeart = document.getElementById("myHeart");
        var v_nemo = document.getElementById("nemo");
        v_myHeart.style.transformOrigin = "center top";
        var v_gak = 0;
        var v_mv = 3;
        function f_swing(){
            v_gak = (v_gak + v_mv) % 360;
            v_myHeart.style.transform = "rotate(" + v_gak + "deg)";
            if(v_gak >= 30 || v_gak <= -30){
                v_mv = -v_mv;
            }
            if(v_gak < 0){
                v_nemo.style.transform = "rotate(0deg)"
            } else {
                v_nemo.style.transform = "rotate(-90deg)";
            }
            setTimeout(f_swing,200);
        }
        f_swing();
    </script>
</body>
</html>

비율조정

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myHeart {
            overflow: visible;
            position: relative;
            top: 100px;
            left: 300px;
            width: 170px;
            height: 430px;
            /* border: 1px solid black; */
        }

        /*#ball {
            position:relative;
            z-index:100;
            top:-25px;
            left:60px;
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: pink;
        }*/
        #bar {
            position: relative;
            top: -50px;
            left: 75px;
            width: 20px;
            height: 300px;
            background-color: orange;
        }

        #heart {
            width: 150px;
            height: 150px;
            left: 9px;
            top: -100px;
            position: relative;
            /*  border:5px dashed magenta; */
            transform: rotate(45deg);
        }

        #tcircle {
            position: absolute;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

        #lcircle {
            position: absolute;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

        #nemo {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-size: 100px 100px;
            background-color: orangered;
        }
    </style>
</head>

<body>
    <input type=button value="크기조정" onclick="f_scale()">
    <div id="myHeart">
        <div id="ball"></div>
        <div id="bar"></div>
        <div id="heart">
            <div id="tcircle"></div>
            <div id="lcircle"></div>
            <div id="nemo"></div>
        </div>
    </div>
    <script>
        function f_scale() {
            var v_parent = document.getElementById("myHeart");
            // v_parent.style.transform = "scale(10)"; // 절반으로 줄이기
            v_parent.style.transform = "scale(2,1.5)"; // 폭 2배, 높이 1.5배
        }
        var v_myHeart = document.getElementById("myHeart");
        var v_nemo = document.getElementById("nemo");
        v_myHeart.style.transformOrigin = "center top";
        var v_gak = 0;
        var v_mv = 3;
        function f_swing() {
            v_gak = (v_gak + v_mv) % 360;
            v_myHeart.style.transform = "rotate(" + v_gak + "deg)";
            if (v_gak >= 30 || v_gak <= -30) {
                v_mv = -v_mv;
            }
            if (v_gak < 0) {
                v_nemo.style.transform = "rotate(0deg)"
            } else {
                v_nemo.style.transform = "rotate(-90deg)";
            }
            setTimeout(f_swing, 200);
        }
      //  f_swing();
    </script>
</body>

</html>
            v_parent.style.transform = "scale(2,1.5)"; // 폭 2배, 높이 1.5배

폭과 높이 둘 다 10

            v_parent.style.transform = "scale(10)"; // 절반으로 줄이기

 

마우스 이벤트

마우스 위에 올라갔을 때

    <div id="myHeart" onmouseover="f_scale()">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myHeart {
            overflow: visible;
            position: relative;
            top: 100px;
            left: 300px;
            width: 170px;
            height: 430px;
            /* border: 1px solid black; */
        }

        /*#ball {
            position:relative;
            z-index:100;
            top:-25px;
            left:60px;
            width:50px;
            height:50px;
            border-radius: 50%;
            background-color: pink;
        }*/
        #bar {
            position: relative;
            top: -50px;
            left: 75px;
            width: 20px;
            height: 300px;
            background-color: orange;
        }

        #heart {
            width: 150px;
            height: 150px;
            left: 9px;
            top: -100px;
            position: relative;
            /*  border:5px dashed magenta; */
            transform: rotate(45deg);
        }

        #tcircle {
            position: absolute;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

        #lcircle {
            position: absolute;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: orangered;
            border-radius: 50%;
        }

        #nemo {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-size: 100px 100px;
            background-color: orangered;
        }
    </style>
</head>

<body>
    <input type=button value="크기조정" onclick="f_scale()">
    <!-- 마우스가 올라갔을 때 -->
    <div id="myHeart" onmouseover="f_scale()">
        <div id="ball"></div>
        <div id="bar"></div>
        <div id="heart">
            <div id="tcircle"></div>
            <div id="lcircle"></div>
            <div id="nemo"></div>
        </div>
    </div>
    <script>
        function f_scale() {
            var v_parent = document.getElementById("myHeart");
            // v_parent.style.transform = "scale(10)"; // 절반으로 줄이기
            v_parent.style.transform = "scale(2,1.5)"; // 폭 2배, 높이 1.5배
        }
        var v_myHeart = document.getElementById("myHeart");
        var v_nemo = document.getElementById("nemo");
        v_myHeart.style.transformOrigin = "center top";
        var v_gak = 0;
        var v_mv = 3;
        function f_swing() {
            v_gak = (v_gak + v_mv) % 360;
            v_myHeart.style.transform = "rotate(" + v_gak + "deg)";
            if (v_gak >= 30 || v_gak <= -30) {
                v_mv = -v_mv;
            }
            if (v_gak < 0) {
                v_nemo.style.transform = "rotate(0deg)"
            } else {
                v_nemo.style.transform = "rotate(-90deg)";
            }
            setTimeout(f_swing, 200);
        }
      //  f_swing();
    </script>
</body>

</html>

 

'카테고리 없음'의 다른글

  • 현재글하트 딸랑딸랑
댓글

티스토리툴바