当前位置：首页 > CSS

css3怎么制作鼠标

2026-02-12 17:15:50CSS

在CSS3中，可以通过多种方式制作鼠标样式或交互效果，以下是几种常见的方法：

自定义鼠标指针样式

使用 cursor 属性可以更改鼠标指针的默认样式。CSS3支持预定义的指针样式（如 pointer、crosshair），也支持通过URL引用自定义图像：

.custom-cursor {
    cursor: url('path/to/cursor-image.png'), auto;
}

注意：自定义图像需为 .cur 或 .png 格式，且需指定备用样式（如 auto）。

鼠标悬停效果

通过 :hover 伪类实现悬停交互，例如改变元素颜色、大小或形状：

.button:hover {
    background-color: #ff0000;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

鼠标跟随动画

结合JavaScript和CSS3动画，可以实现更复杂的鼠标跟随效果。以下是一个基础示例：

.trail {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 255, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

JavaScript部分：

document.addEventListener('mousemove', (e) => {
    const trail = document.createElement('div');
    trail.className = 'trail';
    trail.style.left = `${e.pageX}px`;
    trail.style.top = `${e.pageY}px`;
    document.body.appendChild(trail);
    setTimeout(() => trail.remove(), 500);
});

鼠标点击涟漪效果

利用伪元素和动画实现点击时的扩散效果：

css3怎么制作鼠标

.ripple {
    position: relative;
    overflow: hidden;
}
.ripple:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    animation: ripple 1s ease-out;
}
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 1;
    }
}