实习笔试

1.请写一个html页面，鼠标每次点击屏幕，在以点击处为中心的地方会出现一个旋转的六边形，直径50px，顺时针旋转，每2秒钟转一圈，旋转要流畅。


<html>

<head>
    <title>光之树实习笔试</title>
    <script language="javascript">
        document.onclick = function (event) {
            var e = event || window.event;
            var div = document.getElementById('mydiv');
            div.style.marginLeft = (e.clientX - 25) + 'px';
            div.style.marginTop = (e.clientY - 30) + 'px';
        }
    </script>

    <style>
        .anim {
            -webkit-animation: rot 2s linear infinite;
        }

        @keyframes rot {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes rot {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        .box1,
        .box2,
        .box3,
        .box4 {
            width: 40px;
            height: 50px;
            overflow: hidden;

        }

        .box1 {
            visibility: hidden;
            transform: rotate(120deg);
        }

        .box2 {
            visibility: hidden;
            transform: rotate(-60deg);
        }

        .box3 {
            transform: rotate(-60deg);
            visibility: visible;
            background-color: #83002c;
        }

        .box4 {
            display: block;
            position: relative;
        }
    </style>

</head>

<body>

    <div class="box" id="mydiv" style="position:absolute; ">
        <div class="box1  anim">
            <div class="box2">
                <div class="box3">
                    <div class="box4">

                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>

参考部分：

1.实现六边形：

https://blog.csdn.net/liuxin_1991/article/details/78614694

2.实现旋转：

https://blog.csdn.net/ly305750665/article/details/71499497

3.实现鼠标点击事件：

https://blog.csdn.net/cuishizun/article/details/80507625

参考部分：

猜你喜欢