一个有趣的图片过度动画效果

前言

昨天在网上冲浪的时候，看到了一个关于AI修正图片的网站(GoEnhance AI - Video to video, Image enhancer and upscaler)，这个网站上面有一个图片过渡的效果，就是根据你的鼠标移动来改变图片的展示效果。

实现原理

我看到这个效果的一瞬间就感到很好玩，于是就想了想怎么实现它，发现还是很简单的。

首先

我们先创建一个大盒子（.container），在它里面创建两个子盒子（.box），再在这两个盒子里面分别添加一个img图片标签。(ps:当然你也可以直接将图片放到子盒子中，当它们的背景图片)

<div class="container" id="container">
      <div class="box">
        <img src="./images/at.jpg" alt="你自己图片地址">
      </div>
      <div class="box" id="box2">
        <img src="./images/gs.jpg" alt="你自己图片地址">
      </div>
      <div class="line" id="line"></div>
 </div>

然后

我们开始写css样式。

 * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
      }
      .box {
        width: 100%;
        text-align: center;
        position: absolute;
        overflow: hidden;
      }
      img {
        height: 500px;
      }
      .box:nth-child(2) {
        width: 50%;
      }
      .line{
        content: '';
        position: absolute;
        height: 100%;
        border: 1px solid #000;
        left: 50%;
        transform: translate(50%);
      }

最后

我们开始写js执行脚本，思路是先获取.cantainer、.line和.box2的元素节点，然后再在 .cantainer盒子上面绑定一个鼠标移动事件，再然后获取鼠标在视图上的x轴的位置和.cantainer在视图上的x轴的位置，将它们相减就可以得到鼠标在.cantainer上的位置了，最后把它赋值给.line和.box2上面就好。js代码如下：

var con = document.getElementById('container')
    var line = document.getElementById('line')
    var box2 = document.getElementById('box2')
    con.addEventListener('mousemove', (event)=>{
        var mouseX = event.clientX

        var boxRect = con.getBoundingClientRect()
        var boxX = boxRect.left

        var offsetX = mouseX - boxX

        
        line.style.left = `${offsetX}px`
        box2.style.width = `${offsetX}px`
        console.log(offsetX)
    })
   console.log(con.style)

实现效果