鼠标跟随动画

最新推荐文章于 2024-02-12 17:10:51 发布

赵啸林

最新推荐文章于 2024-02-12 17:10:51 发布

阅读量255

点赞数 2

文章标签：前端

原文链接：https://blog.csdn.net/Qing_0124/article/details/124401234

版权

<!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>鼠标跟随动画</title>
    <style>
        body {
            /* background: #111; */
            /* 超出屏幕的不显示 */
            overflow: hidden;
        }

        span {
            z-index:9999;//显示置于最顶部
            position: absolute;
            /* 禁用 */
            pointer-events: none;
            animation: fadeInOut 1s linear infinite;
        }

        @keyframes fadeInOut {

            0%,
            100% {
                opacity: 1;
            }

            20%,
            80% {
                opacity: 1;
            }
        }

        span:before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: url(./getRich.png);
            /* 让图片填满设置的框子大小 */
            background-size: cover;
            animation: moveShape 1s linear infinite;
        }

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

            100% {
                transform: translate(100px) rotate(360deg)
            }
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    document.addEventListener('mousemove', function (e) {
        let body = document.querySelector("body")
        let star = document.createElement("span")
        star.style.left = e.offsetX + "px"
        star.style.top = e.offsetY + "px"
        body.appendChild(star)
        setTimeout(() => {
            star.remove()
        }, 300)
    })
</script>

赵啸林

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
鼠标跟随动画

<!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>鼠标
复制链接

扫一扫