快捷導(dǎo)航

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

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

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

效果如圖

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

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

上代碼

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

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

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

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

大球和小球的positon都要設(shè)置為absolute
filter容器的filter屬性設(shè)置contrast(任意一個(gè)比較大的值)，這里我設(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;
}

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

也建議選擇一個(gè)比較大的值

然后通過設(shè)置transform:translate(-50%, -50%)讓球?qū)?zhǔn)的位置是球心，而不是div盒子的左上角

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

JS部分實(shí)現(xiàn)小球的跟隨鼠標(biāo)效果

準(zhǔn)備一個(gè)updateFollower()函數(shù)來計(jì)算并更新小球的位置

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

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

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

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

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

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

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

現(xiàn)在只要再運(yù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()

換個(gè)更有趣的配色

結(jié)語

通過CSS濾鏡的方式實(shí)現(xiàn)融球效果非常簡單，適合靜態(tài)、少量元素的時(shí)候使用，對剛?cè)腴T前端的新手非常友好！

感謝看到這里的你，本人是夢想成為前端developer的大一學(xué)生，第一次寫技術(shù)文章，如果有哪里寫得不清楚、有問題，請?zhí)岢鰜斫o我機(jī)會提升自己~~

到此這篇關(guān)于使用CSS+JS實(shí)現(xiàn)融球+跟隨鼠標(biāo)效果實(shí)例的文章就介紹到這了,更多相關(guān)CSS+JS實(shí)現(xiàn)融球+跟隨鼠標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: