哔哩哔哩首页的对焦效果

最新推荐文章于 2024-12-13 23:59:16 发布

Zxy-9

最新推荐文章于 2024-12-13 23:59:16 发布

阅读量231

点赞数

分类专栏： css 文章标签： css html js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45439010/article/details/110090382

版权

css 专栏收录该内容

7 篇文章

订阅专栏

效果图

点击查看

css部分

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 160px;
            position: relative;
            overflow: hidden;
        }
        .container>.banner{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            --offset:0;
            --blur:2px
        }
        .container>.banner>img{
            width: 110%;
            height: 100%;
            display: block;
            object-fit: cover;
            filter: blur(var(--blur));
            transform: translateX(var(--offset));

        }

    </style>

html部分

<div class="container">
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" alt="">
    </div>
    <div class="banner">    <img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" alt="">
    </div>
</div>

js部分


    const images=document.querySelectorAll('img')
    document.querySelector('.container').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`)
          }
    })