html自定义鼠标

最新推荐文章于 2024-03-30 18:20:23 发布

作泥

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量246

点赞数

分类专栏： js效果

本文链接：https://blog.csdn.net/weixin_37787674/article/details/107352233

版权

js效果专栏收录该内容

52 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
        * {
            cursor: none !important;
        }
        #cursorBlob {
            width: 50px;
            height: 50px;
            background: linear-gradient(120deg, #FF1744, #E040FB, #2979FF, #00E5FF, #76FF03);
            background-size: 1600% 1600%;
            position: absolute;
            mix-blend-mode: difference;
            pointer-events: none;
            z-index: 1;
            transition: 0.15s linear;
            animation: blobRadius 5s ease infinite, blobBackground 15s ease infinite;
        }
        @keyframes blobRadius {
            0%,
            100% {
                border-radius: 43% 77% 80% 40% / 40% 40% 80% 80%;
            }
            20% {
                border-radius: 47% 73% 61% 59% / 47% 75% 45% 73%;
            }
            40% {
                border-radius: 46% 74% 74% 46% / 74% 58% 62% 46%;
            }
            60% {
                border-radius: 47% 73% 61% 59% / 40% 40% 80% 80%;
            }
            80% {
                border-radius: 50% 70% 52% 68% / 51% 61% 59% 69%;
            }
        }

        @keyframes blobBackground {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }
    </style>
</head>
<body style="height:1000px;">
    <div id="cursorBlob"></div>
    <div class="wrap">
    </div>
</body>
<script>
    const blobCursor = (() => {
        const CURSOR = document.querySelector('#cursorBlob');
        const LINKS = document.querySelectorAll('.nav__link');
        const setCursorPos = e => {
            const { pageX: posX, pageY: posY } = e;
            CURSOR.style.top = `${posY - CURSOR.offsetHeight / 2}px`;
            CURSOR.style.left = `${posX - CURSOR.offsetWidth / 2}px`;
        };
        document.addEventListener('mousemove', setCursorPos);
        const setCursorHover = () => CURSOR.style.transform = 'scale(2.5)';
        const removeCursorHover = () => CURSOR.style.transform = '';
        LINKS.forEach(link => link.addEventListener('mouseover', setCursorHover));
        LINKS.forEach(link => link.addEventListener('mouseleave', removeCursorHover));
    })();
</script>
</html>

作泥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html自定义鼠标

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>无标题文档</title> <style> * { cursor: none !important; } #cursorBlob { width: 50px; .
复制链接

扫一扫