B站banner图片随鼠标移动虚化效果摸索

其他 2021-01-26 19:04:15 阅读次数: 0

sds

最近，B 站首页 banner 图片会跟随着鼠标的移动而进行变化，类似于相机镜头聚焦的场景虚化效果，很多玩 B 站的小伙伴应该都留意到了吧。猪猪也想实现 banner 背景随鼠标移动而虚化的效果呢。作为一名过气爬虫程序媛，网页分析能力还是有一丢丢的。

扒 B 站源码

在 Google Chrome 打开 Bilibili 站首页，右键点击检查或按 F12 打开开发者工具，定位 B 站 banner 的网页源码位置。获取 banner 网页源代码如下。

<div class="bili-banner" style="" data-v-38a4badd="">
    <div data-v-0a487de8="" data-v-38a4badd="" class="animated-banner">
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
                data-height="250" data-width="3000" height="250" width="3000"
                style="filter: blur(4px); transform: translate(0px, 0px) rotate(0deg);"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"
                data-height="275" data-width="3000" height="165" width="1800"
                style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
                data-height="250" data-width="3000" height="250" width="3000"
                style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
                data-height="250" data-width="3000" height="150" width="1800"
                style="transform: translate(0px, 4.2px) rotate(0deg); filter: blur(4px);"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
                data-height="275" data-width="3000" height="165" width="1800"
                style="transform: translate(0px, -1.8px) rotate(0deg); filter: blur(5px);"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
                data-height="275" data-width="3000" height="178" width="1950"
                style="filter: blur(6px); transform: translate(0px, 0px) rotate(0deg);"></div>
    </div>

我们可以发现 banner 的 class 标签为 “animated-banner”，背景由 6 个 div 组成，6 张图片分别如下。

图层2 big-person

图层3 hill

图层4 leaves

图层5 small-person

图层6 left

将 6 张图片按顺序进行组合叠加，即可形成 B 站首页的图片。解析 B 站 bili-banner 源码，整理如下。

<!doctype html>
<html>

<head>
    <title>仿B站首页-图片随鼠标移动虚化效果</title>
    <style>
        .animated-banner {
     
     position: absolute;top: 0;bottom: 0;left: 0;right: 0; overflow: hidden}
        .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;}
    </style>
</head>

<body>
    <div class="animated-banner">
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
                data-height="250" data-width="3000" height="250" width="3000"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"
                data-height="275" data-width="3000" height="165" width="1800"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
                data-height="250" data-width="3000" height="250" width="3000"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
                data-height="250" data-width="3000" height="150" width="1800"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
                data-height="275" data-width="3000" height="165" width="1800"></div>
        <div class="layer"><img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
                data-height="275" data-width="3000" height="178" width="1950"></div>
    </div>
</body>

效果如下

逐步实现与分析

要实现图片随鼠标移动而虚化效果，主要考虑监听鼠标移动和图片虚化。移动用 transform 中的 translate，模糊虚化用 filter 中的 blur。不同图层根据鼠标来设置图片的 translate 和 blur 属性。

我们先来康康这两个 CSS 属性的作用：

filter 函数

CSS3 Filter 属性 描述 例子
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置 css 长度值，但不接受百分比值。 img { -webkit-filter: blur(5px); filter:blur(5px);}

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。blur 值越大，图片越模糊。

设置各图层的模糊值

<div class="animated-banner" id="animated-banner">
    <div class="layer" id="layer"><img id="forest"
            src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"
            data-width="3000" height="250" width="3000" style="filter: blur(4px);"></div>
    <div class="layer" id="layer"> <img id="big-person"
            src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"
            data-width="3000" height="165" width="1800" style="filter: blur(0px);"></div>
    <div class="layer" id="layer"><img id="hill"
            src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"
            data-width="3000" height="250" width="3000" style="filter: blur(1px);"></div>
    <div class="layer" id="layer"><img id="leaves"
            src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"
            data-width="3000" height="150" width="1800" style="filter: blur(4px);"></div>
    <div class="layer" id="layer"><img id="small-person"
            src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"
            data-width="3000" height="165" width="1800" style="filter: blur(5px);"></div>
    <div class="layer" id="layer"><img id="left"
            src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"
            data-width="3000" height="178" width="1950" style="filter: blur(6px);"></div>
</div>

首先设置默认的 blur() 值, 猪猪设置的聚焦点 blur(0px) 是 B 娘（即图层 2）, 离聚焦点 B 娘远的物体越模糊，blur 值越大，效果如下。

图片移动虚化效果实现

Banner 动画效果相当于照相机镜头聚焦景物的效果,鼠标即相机镜头，移动鼠标的位置即移动镜头位置, 设置照相机焦距，从而达到鼠标移动图层不同程度模糊的效果。这种移动镜头效果是通过移动各图层的来实现的。
B 站上边是使用了 CSS3 的 translate(x, y)，x, y 分别代表相对于原位置移动的距离。 实现镜头的左右移动, 仅更改 x 值 就可以了。

CSS3 transform 属性 描述
translate(x,y) 定义 2D 转换
rotate(angle) 定义 2D 旋转，在参数中规定角度

说明：transform 属性应用于元素的 2D 或 3D 转换，能实现将元素旋转，缩放，移动，倾斜等。

咱把图层的 translate(x,y)属性加上

   <div class="animated-banner" id="animated-banner">
    <div class="layer" id="layer"><img id="forest"
            src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"
            data-width="3000" height="250" width="3000"
            style="transform: translate(0px, 0px) rotate(0deg); filter: blur(4px);"></div>
    <div class="layer" id="layer"> <img id="big-person"
            src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"
            data-width="3000" height="165" width="1800"
            style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div>
    <div class="layer" id="layer"><img id="hill"
            src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"
            data-width="3000" height="250" width="3000"
            style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div>
    <div class="layer" id="layer"><img id="leaves"
            src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"
            data-width="3000" height="150" width="1800"
            style="transform: translate(0px, 7px) rotate(0deg); filter: blur(4px);"></div>
    <div class="layer" id="layer"><img id="small-person"
            src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"
            data-width="3000" height="165" width="1800"
            style="transform: translate(0px, -3px) rotate(0deg); filter: blur(5px);"></div>
    <div class="layer" id="layer"><img id="left"
            src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"
            data-width="3000" height="178" width="1950"
            style="transform: translate(0px, 0px) rotate(0deg); filter: blur(6px);"></div>
</div>

现将 Banner 图片随鼠标移动的整个动画过程细化如下：

  1. 鼠标移入 Banner 背景图，则动画事件执行
  2. 动画随着鼠标移动，图片的 blur 和 translate 样式属性也随着变化
  3. 鼠标移出 Banner 背景图还原初始状态

着手写 js 代码实现如下

<script>
        var layerConfig = JSON.parse('[\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"blur":4}},\
                                {"images":[\
                                {"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},\
                                {"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},\
                                {"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},\
                                {"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"blur":0}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"translate":[-50,0],"blur":1}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"translate":[0,7],"blur":4}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"translate":[0,-3],"blur":5}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"blur":6}}]')

    // 区间限定函数
    function clamp(x, min, max) {
     
     
        if (x < min) return min;
        if (x > max) return max;
        return x;
    }

    t = document.getElementById("layer"),
        // 鼠标移开还原
        t.handleMouseLeave = function () {
     
     
            layerConfig.forEach(function (t) {
     
     
                document.getElementById("forest").setAttribute("style", "filter: blur(" + layerConfig[0].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                document.getElementById("big-person").setAttribute("style", "filter: blur(" + layerConfig[1].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                document.getElementById("hill").setAttribute("style", "filter: blur(" + layerConfig[2].initial.blur + "px); transform: translate(" + layerConfig[2].initial.translate[0] + "px," + layerConfig[2].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("leaves").setAttribute("style", "filter: blur(" + layerConfig[3].initial.blur + "px); transform: translate(" + layerConfig[3].initial.translate[0] + "px," + layerConfig[3].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("small-person").setAttribute("style", "filter: blur(" + layerConfig[4].initial.blur + "px); transform: translate(" + layerConfig[4].initial.translate[0] + "px," + layerConfig[4].initial.translate[1] + "px) rotate(0deg);");
                document.getElementById("left").setAttribute("style", "filter: blur(" + layerConfig[5].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");

            });

        },
        // 鼠标移动
        t.handleMouseMove = function (t) {
     
     
            var x = t.pageX;
            // console.log("当前鼠标位置：", t.pageX);
           
            document.getElementById("forest").setAttribute("style", "filter: blur(" + clamp(x / 35, 0, 9) + "px); transform: translate(0px, 0px) rotate(0deg);");
            document.getElementById("big-person").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 75 - 7, -3, 7)) + "px); transform: translate(" + x / 50 + "px, 0px) rotate(0deg);");
            document.getElementById("hill").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 125 - 5, -5, 5)) + "px); transform: translate(" + x / 40 + "px, 0px) rotate(0deg);");
            document.getElementById("leaves").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 250 - 3, -7, 3)) + "px); transform: translate(" + x / 30 + "px, 0px) rotate(0deg);");
            document.getElementById("small-person").setAttribute("style", "filter: blur(" + clamp(5 - x / 250, 0, 5) + "px); transform: translate(" + x / 20 + "px, 0px) rotate(0deg);");
            document.getElementById("left").setAttribute("style", "filter: blur(" + clamp(6 - x / 250, 0, 6) + "px); transform: translate(" + x / 10 + "px, 0px) rotate(0deg);");
        },
        window.requestAnimationFrame(t.handleMouseMove),
        document.addEventListener("mouseleave", t.handleMouseLeave),
        window.addEventListener("mousemove", t.handleMouseMove)
</script>

如果你有仔细观察的 Banner 背景图片随鼠标移动的规律，你会发现整个动画动作有下面特点。

鼠标在向右移动的时候，聚焦点向前移，聚焦点由图层 2 逐渐转向图层 3、图层 4 到图层 6。镜头越趋向图层的聚焦点的时候，图片越清晰，镜头移出图层的时候，图层趋于模糊。当鼠标在向左移动的时候，聚焦点向后移，聚焦点由图层 2 逐渐转向图层 1。其实鼠标就是相当于镜头，聚焦到哪个景物，哪个景物就清晰，距离聚焦点越远的景物越模糊。

懂了动画模糊和镜头移动景物变化原理，blur() 和 translate(x,y) 变化规律便能能知道如何设置。

B 娘眨眼动画效果实现

动画在影视角度上来说，其实就是通过一帧帧图片迅速切换而实现的视觉上的动态效果。仔细观察 B 站的 Banner 中的 B 娘其实每隔 5 秒会进行一次眨眼动作，仔细查看前端源码，会发现第二个 div 中 img 标签中的 src 属性其实是会变动的，分析得知 B 娘眨眼动作由下面几张图循环切换而成。

眨眼 第一帧

眨眼 第二帧

眨眼 第三帧

眨眼 第四帧

通过这四张图片的不同停留时间，既可以达到视觉上的眨眼动画效果，设置图片停留时间可以通过 setTimeout()方法实现。

      // 人物动画（眨眼动作）
        function playImgTimer(i, index) {
    
    
            setTimeout((function () {
    
    
                var n = index === i.length - 1 ? 0 : index + 1;
                $('#big-person').attr("src", i[n].src);
                playImgTimer(i, n);
            }), i[index].duration)
        }
        playImgTimer(layerConfig[1].images, 0);

setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器的编号，这个值可以传递给 clearTimeout()用于取消这个函数的执行。

最后完整实现如下，本次对 B 站 Banner 前端研究因兴趣而起，很多地方完成的并不完善，如有不对或不足，请多指正。

<!doctype html>
<html>

<head>
    <style>
        .animated-banner {
     
     position: absolute;top: 0;bottom: 0;left: 0;right: 0; overflow: hidden}
        .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;}
    </style>
</head>

<body>

    <div class="animated-banner" id="animated-banner">
        <div class="layer" id="layer"><img id="forest"
                src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"
                data-width="3000" height="250" width="3000"
                style="transform: translate(0px, 0px) rotate(0deg); filter: blur(4px);"></div>
        <div class="layer" id="layer"> <img id="big-person"
                src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"
                data-width="3000" height="165" width="1800"
                style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div>
        <div class="layer" id="layer"><img id="hill"
                src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"
                data-width="3000" height="250" width="3000"
                style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div>
        <div class="layer" id="layer"><img id="leaves"
                src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"
                data-width="3000" height="150" width="1800"
                style="transform: translate(0px, 7px) rotate(0deg); filter: blur(4px);"></div>
        <div class="layer" id="layer"><img id="small-person"
                src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"
                data-width="3000" height="165" width="1800"
                style="transform: translate(0px, -3px) rotate(0deg); filter: blur(5px);"></div>
        <div class="layer" id="layer"><img id="left"
                src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"
                data-width="3000" height="178" width="1950"
                style="transform: translate(0px, 0px) rotate(0deg); filter: blur(6px);"></div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>

        var layerConfig = JSON.parse('[\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"blur":4}},\
                                {"images":[\
                                {"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},\
                                {"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},\
                                {"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},\
                                {"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"blur":0}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"translate":[-50,0],"blur":1}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"translate":[0,7],"blur":4}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"translate":[0,-3],"blur":5}},\
                                {"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"blur":6}}]')

        // 人物动画（眨眼动作）
        function playImgTimer(i, index) {
     
     
            setTimeout((function () {
     
     
                var n = index === i.length - 1 ? 0 : index + 1;
                $('#big-person').attr("src", i[n].src);
                playImgTimer(i, n);
            }), i[index].duration)
        }
        playImgTimer(layerConfig[1].images, 0);

        // 区间限定函数
        function clamp(x, min, max) {
     
     
            if (x < min) return min;
            if (x > max) return max;
            return x;
        }

        t = document.getElementById("layer"),
            // 鼠标移开还原
            t.handleMouseLeave = function () {
     
     
                layerConfig.forEach(function (t) {
     
     
                    document.getElementById("forest").setAttribute("style", "filter: blur(" + layerConfig[0].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                    document.getElementById("big-person").setAttribute("style", "filter: blur(" + layerConfig[1].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");
                    document.getElementById("hill").setAttribute("style", "filter: blur(" + layerConfig[2].initial.blur + "px); transform: translate(" + layerConfig[2].initial.translate[0] + "px," + layerConfig[2].initial.translate[1] + "px) rotate(0deg);");
                    document.getElementById("leaves").setAttribute("style", "filter: blur(" + layerConfig[3].initial.blur + "px); transform: translate(" + layerConfig[3].initial.translate[0] + "px," + layerConfig[3].initial.translate[1] + "px) rotate(0deg);");
                    document.getElementById("small-person").setAttribute("style", "filter: blur(" + layerConfig[4].initial.blur + "px); transform: translate(" + layerConfig[4].initial.translate[0] + "px," + layerConfig[4].initial.translate[1] + "px) rotate(0deg);");
                    document.getElementById("left").setAttribute("style", "filter: blur(" + layerConfig[5].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");

                });
            },
            // 鼠标移动
            t.handleMouseMove = function (t) {
     
     
                var x = t.pageX;
                // console.log("当前鼠标位置：", t.pageX);
                
                document.getElementById("forest").setAttribute("style", "filter: blur(" + clamp(x / 35, 0, 9) + "px); transform: translate(0px, 0px) rotate(0deg);");
                document.getElementById("big-person").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 75 - 7, -3, 7)) + "px); transform: translate(" + x / 50 + "px, 0px) rotate(0deg);");
                document.getElementById("hill").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 125 - 5, -5, 5)) + "px); transform: translate(" + x / 40 + "px, 0px) rotate(0deg);");
                document.getElementById("leaves").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 250 - 3, -7, 3)) + "px); transform: translate(" + x / 30 + "px, 0px) rotate(0deg);");
                document.getElementById("small-person").setAttribute("style", "filter: blur(" + clamp(5 - x / 250, 0, 5) + "px); transform: translate(" + x / 20 + "px, 0px) rotate(0deg);");
                document.getElementById("left").setAttribute("style", "filter: blur(" + clamp(6 - x / 250, 0, 6) + "px); transform: translate(" + x / 10 + "px, 0px) rotate(0deg);");
            },
            window.requestAnimationFrame(t.handleMouseMove),
            document.addEventListener("mouseleave", t.handleMouseLeave),
            window.addEventListener("mousemove", t.handleMouseMove)
    </script>
</body>
</html>

实现效果

猜你喜欢

转载自blog.csdn.net/qq_36148847/article/details/110665417
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022