鼠标跟随小圆圈

<style>
/*鼠标跟随小圆圈*/
.mouseCircle {
        animation: textPopup 1s;
        width: 10px;height: 10px;
        border:1px solid #CCCC9A;
        border-radius: 50%;
        position: absolute;
        z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        width:20px;height:20px;
        transform: translateY(-50px);    
    }
}
</style>
复制代码

<script>
    var mouseCircle = function () {
        document.documentElement.addEventListener('mousemove', function (event) {
            var x = event.pageX, y = event.pageY;
            var mouseCircle = document.createElement('div');
            mouseCircle.className = 'mouseCircle';
            this.appendChild(mouseCircle);
            // 动画结束后删除自己
            mouseCircle.addEventListener('animationend', function () {
                mouseCircle.parentNode.removeChild(mouseCircle);
            });
            // 位置
            mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + 'px';
            mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + 'px';
        });  

        document.documentElement.addEventListener('click', function (event) {
            var x = event.pageX, y = event.pageY;
            var mouseCircle = document.createElement('div');
            mouseCircle.className = 'mouseCircle';
            this.appendChild(mouseCircle);
            // 动画结束后删除自己
            mouseCircle.addEventListener('animationend', function () {
                mouseCircle.parentNode.removeChild(mouseCircle);
            });
            // 位置
            mouseCircle.style.left = (x - mouseCircle.clientWidth / 2) + 'px';
            mouseCircle.style.top = (y - mouseCircle.clientHeight-10) + 'px';
        });    
    };

    mouseCircle();
</script>
复制代码

codepen.io/loejin/pen/…

转载于:https://juejin.im/post/5c92119f6fb9a0710b726460