如何实现类似b站banner图片效果，景深透视图。

最新推荐文章于 2024-05-21 23:20:00 发布

Johna_114514

最新推荐文章于 2024-05-21 23:20:00 发布

阅读量126

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_63007736/article/details/130145016

版权

效果图：

景深透视图

html代码：

    <div class="container">
        <!-- 这里使用的图片均为png格式，因为png格式带有alpha通道，也就是透明图层 -->
        <!-- html渲染是从上到下的，所以最上层的图片需要放在最下面 -->
        <img src="./src/30c91359b0877ef038be685c8081501ed34c3089.png" width="800">
        <img src="./src/30c91359b0877ef038be685c8081501ed34c30891.png" width="800">
        <img src="./src/30c91359b0877ef038be685c8081501ed34c30892.png" width="800">
    </div>

css代码：

        /* 我们需要用到css的全局变量 ，每层图片各需要2个变量*/
        :root{
            --bottom-left:0;
            --mid-left:0;
            --top-left:0;
            --bottom-top:0;
            --mid-top:0;
            --top-top:0
        }
        /* 将图片多余的部分不显示，并且容器是相对定位 */
        .container{
            width: 800px;
            height: 400px;
            background-color: gray;
            margin:0 auto;
            overflow: hidden;
            position: relative;
        }
        .container img{
            position: absolute;
            top:0;
            left: 0;
        }
        /* 因为我们图片是需要偏移的，我们就需要设置图片的缩放比例 */
        /* 这里通过修改图片的定位来实现景深透视效果 */
        .container img:nth-child(1){
            left: var(--bottom-left);
            top: var(--bottom-top);
            transform: scale(1.1)
        }
        .container img:nth-child(2){
            left: var(--mid-left);
            top: var(--mid-top);
        }
        .container img:nth-child(3){
            left: var(--top-left);
            top: var(--top-top);
        }

js代码：

var timer=null;
        var box=document.querySelector('.container')
        box.addEventListener('mousemove',function(e){
            if(timer)return;
            timer=setTimeout(() => {
                // e.clientX和e.clientY是鼠标相对于浏览器窗口可视区的坐标
                // this.clientLeft和this.clientTop是元素的左边框和上边框的宽度
                // 400和100是容器的宽高的1/2，不剪去400和100则计算的offset是鼠标相对于图片左上角的坐标
                // e.clientX - this.clientLeft-400和e.clientY - this.clientTop-100就是容器的中心位置
                var offsetX = e.clientX - this.clientLeft-400;
                var offsetY = e.clientY - this.clientTop-100;
                // 这里设置图片的偏移量，越是最上层的图片，偏移量越大
                document.documentElement.style.setProperty('--bottom-left', offsetX/100+'px');
                document.documentElement.style.setProperty('--mid-left', offsetX/50+'px');
                document.documentElement.style.setProperty('--top-left', offsetX/10+'px');

                document.documentElement.style.setProperty('--bottom-top', offsetY/100+'px');
                document.documentElement.style.setProperty('--mid-top', offsetY/50+'px');
                document.documentElement.style.setProperty('--top-top', offsetY/10+'px');

                timer=null
            }, 10);
        })