鼠标动画---充电插头效果

---

前言

效果展示，本人不会弄gif,在晚上下载的转gif的都是有水印，还不如不用。有推荐的，说一下，蟹蟹啦

---

展示效果：

一、html

 <section class="p2">
        <img src="3.png" width="100%"/>
        <span class="t2">hello</span>
    </section> 
    <section class="d2_w">
        <diiv class="d2">
            <p><img src="./1.png" class="img1"/></p>
            <div class="m2">简单容易操作</div>
            <div class="m2_1">接入PC端USB接口即可使用(USB2.0以上)</div>
            <img class="m2_2" src="4.png" alt="" />
            <p><img src="./2.png" class="img2"/></p> 
        </section>
    </section>
    <section style="height: 1000px;background: pink;">
        <span class="t2">hello</span>
    </section> 

二、css

 body{
            background: #010c26;
        }
       .d2_w{
            height: 600vh;
       }
        .d2{
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .m2{
            opacity: 0;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #fff;
            margin: 20px 0;
            transition: linear 0.3s;
        }
        p{
            text-align: center;
        }
        .m2_1{
            margin-top: -4rem;
            background: #010c26;
            z-index: 9;
        }
        .m2_1,.m2_2{
            opacity: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: #ffff;
            font-size: 45px;
        }
        .img1{
            position: absolute;
            transition: linear 0.2s;
            opacity: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
        .img2{
            position: absolute;
            left: 50%;
            transform: translate(-50%,0);
            transition: linear 0.2s;
            opacity: 0;
        }

三、JavaScript

代码如下（示例）：

 let m2 = document.querySelector(".m2");
 let img1 = document.querySelector(".img1");
let img2 = document.querySelector(".img2");
let m2_1 = document.querySelector(".m2_1");
let m2_2 = document.querySelector(".m2_2");
 const html = document.documentElement
// let p2h = p2.clientHeight;

 document.addEventListener('scroll', (e) => {
   let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight)

if(scrolled<0.17){
    img1.style.opacity = 0;
    img2.style.opacity = 0;
}
 else if (0.6>scrolled > 0.17) {
    m2.style.opacity = (scrolled - 0.1) / 0.1;
    img1.style.opacity = 1;
    img2.style.opacity = 1;
    img1.style.top = scrolled * 50 - 30 + '%';
    img2.style.bottom = scrolled * 50 - 30 + '%';
    m2_1.style.opacity = 0;
    m2_2.style.opacity = 0;
  }else {
    console.log(scrolled)
    img1.style.opacity = 0;
    img2.style.opacity = 0;
    m2.style.opacity = 0;
    m2_1.style.opacity = 1;
    m2_2.style.opacity =1;
   }
 })

总结

效果出来了，写的很随意，你们可以自己优化。