快捷導(dǎo)航

使用CSS+JS實現(xiàn)融球+跟隨鼠標效果實例

更新時間：2026年03月21日 10:28:57 作者：LavenderLee

JavaScript可以通過事件處理程序?qū)τ脩舻慕换プ龀龇磻?yīng),例如點擊按鈕、鼠標移動等,下面這篇文章主要介紹了使用CSS+JS實現(xiàn)融球+跟隨鼠標效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

效果如圖

可以實現(xiàn)大球固定不動，另一個小球跟隨鼠標平滑移動，當(dāng)兩者靠近時發(fā)生融球效果

原理非常簡單，filter: blur() + contrast()即可實現(xiàn)。

上代碼

<body>
    <div class="ball_filter">
        <div class="big_ball"></div>
        <div class="ball"></div>
    </div>

    <script src="move_ball.js"></script>
</body>

首先我們需要一個filter容器，里面裝一個保持不動的大球和一個follower小球

接著在CSS代碼里簡單設(shè)置一下，需要注意的是：

大球和小球的positon都要設(shè)置為absolute
filter容器的filter屬性設(shè)置contrast(任意一個比較大的值)，這里我設(shè)置的是1500%

值越大，小球的邊界越清晰

.ball_filter {
    position: relative;
    height: 100vh;
    width: 100vw;
    filter: contrast(1500%);
    background-color: white;
}

.big_ball {
    position: absolute;
    height: 400px;
    width: 400px;
    left: 50%;
    top: 50%;
}

.ball {
    position: absolute;
    height: 250px;
    width: 250px;
}

這里再對兩個球都設(shè)置一下filter: blur()

也建議選擇一個比較大的值

然后通過設(shè)置transform:translate(-50%, -50%)讓球?qū)实奈恢檬乔蛐?，而不是div盒子的左上角

.ball_filter div {
    border-radius: 50%;
    background-color: black;
    filter: blur(3rem);
    transform: translate(-50%, -50%);
}

JS部分實現(xiàn)小球的跟隨鼠標效果

準備一個updateFollower()函數(shù)來計算并更新小球的位置

當(dāng)前坐標為cx和cy，使其按照ease的速率向著目標坐標tx和ty進行變化

其中ease越小，小球移動的速度就越慢

function updateFollower() {
    cx += (tx - cx) * ease
    cy += (ty - cy) * ease

    follower.style.left = `${cx}px`
    follower.style.top = `${cy}px`
    
    requestAnimationFrame(updateFollower)
}

再給document添加一個鼠標移動的監(jiān)聽：

當(dāng)鼠標移動時，把小球移動的目標坐標（tx和ty）設(shè)置為鼠標的坐標

document.addEventListener("mousemove", (e) => {
    tx = e.clientX
    ty = e.clientY
})

現(xiàn)在只要再運行updateFollower()函數(shù)就ok了

updateFollower()

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>

<body>
    <div class="ball_filter">
        <div class="big_ball"></div>
        <div class="ball"></div>
    </div>

    <script src="move_ball.js"></script>
</body>

</html>

.html,body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.ball_filter div {
    border-radius: 50%;
    background-color: black;
    filter: blur(3rem);
    transform: translate(-50%, -50%);
}

.ball_filter {
    position: relative;
    height: 100vh;
    width: 100vw;
    filter: contrast(1500%);
    background-color: white;
}

.big_ball {
    position: absolute;
    height: 400px;
    width: 400px;
    left: 50%;
    top: 50%;
}

.ball {
    position: absolute;
    height: 250px;
    width: 250px;
}

let follower = document.querySelector('.ball')
let tx = window.innerWidth/2, ty = window.innerHeight/2, cx = tx, cy = ty
let ease = 0.08

function updateFollower() {
    cx += (tx - cx) * ease
    cy += (ty - cy) * ease

    follower.style.left = `${cx}px`
    follower.style.top = `${cy}px`
    
    requestAnimationFrame(updateFollower)
}

document.addEventListener("mousemove", (e) => {
    tx = e.clientX
    ty = e.clientY
})

updateFollower()

換個更有趣的配色