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

前言

效果展示，本人不会弄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;}})

总结

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