h5奔跑的小人

最新推荐文章于 2021-07-19 15:39:33 发布
shuping199qi
最新推荐文章于 2021-07-19 15:39:33 发布
阅读量149
点赞数
本文链接：https://blog.csdn.net/shuping199qi/article/details/118611544
版权
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>奔跑的小人</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            background: #333;
        }

        .man {
            width: 100px;
            height: 200px;
            position: absolute;
        }

        @keyframes run {
            /*0% {*/
            /*transform: translate(0, 0);*/
            /*}*/
            /*100% {*/
            /*transform: translate(1200px, 300px);*/
            /*}*/
        }

        .head {
            width: 60px;
            height: 60px;
            border-radius: 30px;
            border: 2px solid white;
            margin: 0 auto;
            overflow: hidden;
        }

        .eye-left {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
            margin-left: 25%;
            margin-top: 25px;
            float: left;
            animation: eye-left 3s linear infinite;
        }

        .eye-right {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
            margin-left: 25%;
            margin-top: 25px;
            float: left;
            animation: eye-left 3s linear infinite;
        }

        .mouth {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            border-bottom: 5px solid white;
            margin-left: 25%;
            margin-top: -30%;
            float: left;
            animation: mouth 3s linear infinite;
        }

        @keyframes mouth {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(30px);
            }
        }

        @keyframes eye-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(30px);
            }
        }

        .body {
            width: 2px;
            height: 65px;
            background: white;
            margin: 0 auto;
        }

        .hand-left, .hand-right {
            width: 40px;
            height: 50px;
            border-left: 2px solid white;
            border-bottom: 2px solid white;
            position: absolute;
            top: 85px;
            left: 49px;
            transform-origin: 0 0;
        }

        .hand-left {
            transform: rotate(45deg);
            animation: hand-left 0.5s linear infinite;
        }

        @keyframes hand-left {
            0% {
                transform: rotate(60deg);
            }
            50% {
                transform: rotate(-45deg);
            }
            100% {
                transform: rotate(60deg);
            }
        }

        .hand-right {
            transform: rotate(-45deg);
            animation: hand-right 0.5s linear infinite;
        }

        @keyframes hand-right {
            0% {
                transform: rotate(-45deg);
            }
            50% {
                transform: rotate(60deg);
            }
            100% {
                transform: rotate(-45deg);
            }
        }

        .leg-left, .leg-right {
            width: 50px;
            height: 55px;
            border-bottom: 2px solid white;
            border-right: 2px solid white;
            position: absolute;
            top: 128px;
            transform-origin: 100% 0;
        }

        .leg-left {
            transform: rotate(45deg);
            animation: leg-left 0.5s linear infinite;
        }

        @keyframes leg-left {
            0% {
                transform: rotate(45deg);
            }
            50% {
                transform: rotate(-60deg);
            }
            100% {
                transform: rotate(45deg);
            }
        }

        .leg-right {
            transform: rotate(-80deg);
            animation: leg-right 0.5s linear infinite;
        }

        @keyframes leg-right {
            0% {
                transform: rotate(-80deg);
            }
            50% {
                transform: rotate(45deg);
            }
            100% {
                transform: rotate(-80deg);
            }
        }

        #wz {
            width: 20px;
            height: 20px;
            left:90px;
            top:32px;
            border-radius: 10px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        var x = 90;
        var y = 32;
        var position = "left:0px; top:0px;";

        function findKeyframesRule(ruleName) {
            //此处过滤非同源的styleSheet，因为非同源的无法访问cssRules，会报错
            var ruleArr = document.styleSheets[0].rules;
            for (var i = 0; i < ruleArr.length; i++) {
                var rule = ruleArr[i];
                if (rule instanceof CSSKeyframesRule && rule.name == ruleName) {
                    return i;
                }
            }
            return -1;
        }

        function changeRule(_x, _y) {
            var ruleIndex = findKeyframesRule('run');
            document.styleSheets[0].deleteRule(ruleIndex);

            //重新定义ball从定位在(20,30)的位置运动到(400,500) 的位置
            const newRule = '@keyframes run{'
                + '0%{'
                + '    left: ' + x + 'px;'
                + '    top: ' + y + 'px;'
                + '}'
                + '100%{'
                + '    left: ' + _x + 'px;'
                + '    top: ' + _y + 'px;'
                + '}' +
                '}';
            console.log("( " + x + "," + y + " ) -------> ( " + _x + "," + _y + " )")
            document.styleSheets[0].insertRule(newRule, ruleIndex);
            document.getElementsByClassName("man")[0].setAttribute("style", position);

            document.getElementsByClassName("man")[0].setAttribute('style', 'animation: run 3s 1;');

            x = _x;
            y = _y;
            position = "left:" + _x + "px; top:" + _y + "px;";
            setTimeout(_ => {
                document.getElementsByClassName("man")[0].setAttribute("style", position);
            }, 3000)
        }

        function mouseClick(event) {
            var e = event || window.event;
            var _x = e.clientX;
            var _y = e.clientY;
            document.getElementById("wz").setAttribute("style", "left:" + _x + "px;top:" + _y + "px;")
            _x -= 90;
            _y -= 32;
            changeRule(_x, _y)
        }
    </script>
</head>
<body onclick="mouseClick(event)">
<div class="man">
    <div class="head">
        <div class="eye-left"></div>
        <div class="eye-right"></div>
        <div class="mouth"></div>
    </div>
    <div class="body"></div>
    <div class="hand-left"></div>
    <div class="hand-right"></div>
    <div class="leg-left"></div>
    <div class="leg-right"></div>
</div>

<div id="wz" style="">

</div>
</body>
</html>