模仿B站首页的Banner动画模仿B站首页的banner动画我懒，直接贴代码，你们自己随意玩玩

模仿B站首页的banner动画我懒，直接贴代码，你们自己随意玩玩
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .animated-banner {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            overflow: hidden;
        }

        .animated-banner>.layer {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        img {
            vertical-align: middle;
            border-style: none;
        }

        .bili-banner {
            margin: 0 auto;
            position: relative;
            z-index: 0;
            min-height: 155px;
            height: 9.375vw;
            min-width: 999px;
            background-color: #f9f9f9;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            background-repeat: no-repeat;
            background-position: center 0;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="bili-banner" onmousemove="bigImg(event)">

        <div class="animated-banner">
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
                    style="filter: blur(4px); transform: translate(0px, 0px) rotate(0deg);" height="259" width="3116">
            </div>
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png"
                    style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);" height="171" width="1869">
            </div>
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
                    style="transform: translate(-51.9355px, 0px) rotate(0deg); filter: blur(1px);" height="259"
                    width="3116">
            </div>
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
                    style="transform: translate(0px, 4.36258px) rotate(0deg); filter: blur(4px);" height="155"
                    width="1869">
            </div>
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
                    style="transform: translate(0px, -1.86968px) rotate(0deg); filter: blur(5px);" height="171"
                    width="1869">
            </div>
            <div class="layer">
                <img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
                    style="filter: blur(6px); transform: translate(0px, 0px) rotate(0deg);" height="185" width="2025">
            </div>
        </div>
    </div>
    <script>
        let layer0 = document.getElementsByTagName("img")[0];
        let layer1 = document.getElementsByTagName("img")[1];
        let layer2 = document.getElementsByTagName("img")[2];
        let layer3 = document.getElementsByTagName("img")[3];
        let layer4 = document.getElementsByTagName("img")[4];
        let layer5 = document.getElementsByTagName("img")[5];

        //眨眼
        console.log(layer1);
        console.log(layer1.src);
        function zhayan(){
            layer1.src = 'https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png';
        }
        setInterval(zhayan(),500)
        // https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png


        // layer0.style.filter = 'blur(3px)'; 修改blur
        function bigImg(event){
            // 拿到盒子的X轴坐标
            var x = event.clientX;

            // console.log(x);
            layer0.style.filter = `blur(${0.00425*x}px)`;

            layer1.style.transform = `translate(${0.00425*x}px,0px)`;
            layer1.style.filter = `blur(${0.00425*x}px)`;

            layer2.style.transform = `translate(${-51+0.016*x}px,0px)`;
            layer2.style.filter = `blur(${0.00215*x}px)`;

            layer3.style.transform = `translate(${0.016*x}px,4.36258px)`;
            layer3.style.filter = `blur(${4-0.00215*x}px)`;

            layer4.style.transform = `translate(${0.035*x}px,-1.86968px)`;
            layer4.style.filter = `blur(${5-0.00315*x}px)`;

            layer5.style.transform = `translate(${0.035*x}px,0)`;
            layer5.style.filter = `blur(${6-0.00215*x}px)`;

            // console.log(layer4);
            // console.log(layer0);
        }

    </script>
</body>

</html>