当前位置：首页 > 技术博客 > JavaScript > Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

4年前 (2021-07-20)JavaScript934

交互式鼠标悬停头图景深对焦效果

<head>      
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    
		<title>B站头图景深对焦效果</title>    
<style>    
    body {    
    margin: 0;    
    }    
    header {    
    height: 160px;    
    position: relative;    
    overflow: hidden;    
    }    
    header > div {    
    position: absolute;    
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 100%;    
    display: flex;    
    justify-content: center;    
    align-items: center;    
    --offset: 0px;    
    --blur: 2px;    
    }    
    header > div > img {    
    display: block;    
    width: 110%;    
    height: 100%;    
    object-fit: cover;    
    transform: translatex(var(--offset));    
    filter: blur(var(--blur));    
    }    
</style>    
</head>    
<body>    
<header>    
    <div><img src="https://pic3.58cdn.com.cn/nowater/webim/big/n_v2aa4e07773e834330a4879a85aaf52d20.png"></div>    
    <div><img src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v21e2504548c9d46ad86eb8e1fb1343184.png"></div>    
    <div><img src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v292447ee06af84d38a004ffcc74a26218.png"></div>    
    <div><img src="https://pic8.58cdn.com.cn/nowater/webim/big/n_v2c6b65cf6c5a54a8ca776a34045e2b349.png"></div>    
    <div><img src="https://pic2.58cdn.com.cn/nowater/webim/big/n_v2ea1dda358ed543df8628fcbf686f5230.png"></div>    
    <div><img src="https://pic1.58cdn.com.cn/nowater/webim/big/n_v23b40c7a5df42486084baa03b53e366be.png"></div>    
</header>        
	<h3 style="text-align: center">请在图片上左右移动鼠标查看效果</h3>    
<script>    
    const images = document.querySelectorAll('header > div > img')    
    document.querySelector('header').addEventListener('mousemove', (e) => {    
    let percentage = e.clientX / window.outerWidth    
    let offset = 10 * percentage    
    let blur = 20    
    for (let [index, image] of images.entries()) {    
    offset *= 1.3    
    let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)    
    image.style.setProperty('--offset', `${offset}px`)    
    image.style.setProperty('--blur', `${blurValue}px`)    
    }    
    })    
</script>    
</body>

电脑端的朋友可以直接点击上面的【运行代码】按钮查看效果