css+js实现鼠标移动跟随动画

奔走的蜗牛001
于 2022-09-17 16:08:26 发布
阅读量540
点赞数
文章标签： javascript css 前端
本文链接：https://blog.csdn.net/qq_34458914/article/details/126906850
版权
<!DOCTYPE html>
<html lang="en">
<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>
    <head>
        <style>
            body,
            html,
            * {
                padding: 0;
                margin: 0;
            }
            
            #wrapper {
                width: 1500px;
                height: 400px;
                margin: 100px auto;
                background-color: lavender;
                font-size: 0;
                overflow: hidden;
            }

            .circle {
                width: var(--circle-width);
                height: var(--circle-height);
                display: inline-flex;
                border-radius: 50%;
                animation: var(--circle-show);
                position: relative;
            }

            .tip {
                position: absolute;
                width: 5px;
                height: 10px;
                left: 50%;
                top: -10%;
                border-radius: 100% 0 0 100%/50%;
                transform: translate(-50%, -50%);
                animation: var(--tip-show);
            }

            @keyframes tipAnimation {

                0% {

                    border: 1px solid black;

                    border-right: none;

                }



                100% {

                    border: 1px solid transparent;

                    border-right: none;

                }

            }

            @keyframes circleAnimation {

                0% {

                    background-color: rosybrown;

                    transform: rotate(0deg);

                }



                10% {

                    background-color: lightcoral;

                }



                20% {

                    background-color: lemonchiffon;

                }



                30% {

                    background-color: lightgreen;

                }



                40% {

                    background-color: lawngreen;

                }



                50% {

                    background-color: lightblue;

                }



                60% {

                    background-color: lightskyblue;

                }



                70% {

                    background-color: lightseagreen;

                }



                80% {

                    background-color: pink;

                }



                90% {

                    background-color: plum;

                }



                100% {

                    background-color: purple;

                    transform: rotate(360deg);

                }

            }

            @keyframes circleAnimationLeave {

                0% {

                    background-color: rosybrown;

                }



                10% {

                    background-color: lightcoral;

                }



                20% {

                    background-color: lemonchiffon;

                }



                30% {

                    background-color: lightgreen;

                }



                40% {

                    background-color: lawngreen;

                }



                50% {

                    background-color: lightblue;

                }



                60% {

                    background-color: lightskyblue;

                }



                70% {

                    background-color: lightseagreen;

                }



                80% {

                    background-color: pink;

                }



                90% {

                    background-color: plum;

                }



                100% {

                    background-color: purple;

                }

            }
        </style>
    </head>
<body>
    <div id="wrapper">
    </div>
</body>

<script>
    const wrapper = document.getElementById('wrapper');
    const width = 1500 / 60;
    const height = 800 / 33;
    const len = width * height;
    for (let i = 0; i < len; i++) {
        let circle = document.createElement('div');
        let tip = document.createElement('tip');
        circle.className = 'circle';
        tip.className = 'tip';
        circle.appendChild(tip);
        circle.style.setProperty('--circle-width', `${width}px`);
        circle.style.setProperty('--circle-height', `${height}px`);
        tip.style.setProperty('--tip-show', 'none');
        wrapper.appendChild(circle);
    }

    const circles = document.getElementsByClassName('circle');
    if (circles.length > 0) {
        for (let i = 0; i < circles.length; i++) {
            circles[i].addEventListener('mouseenter', () => {
                circles[i].style.setProperty('--circle-show', 'circleAnimation 3s linear');
                let tip = circles[i].firstChild;
                tip.style.setProperty('--tip-show', 'tipAnimation 1s linear');
            });
            circles[i].addEventListener('mouseleave', () => {
                circles[i].style.setProperty('--circle-show', 'circleAnimationLeave 2s linear');
            });
        }
    }
</script>
</html>