鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。
欢迎选择我的课程，让我们一起见证您的进步~~
仅使用css实现背景图片切换并滑动
逻辑：运用雪碧图把两张图片合并为一张图片，使用transition和background-position两个属性实现滑动切换.
demo：http://runjs.cn/detail/btbjrwwr
我随手写了一个，题主可以看看实现思路另外题主要学会用搜索引擎，这种搜索一大把
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .cansee { width: 300px; height: 400px; margin: 0 auto; border: 1px solid #000; overflow: hidden; } #img1 { width: 300px; height: 400px; background-color: red; } #img2 { width: 300px; height: 400px; background-color: blue; } .box { transition: all 1s ease-in-out; } .box:hover{ transform: translateY(-50%); } </style> </head> <body> <p class="cansee"> <p class="box"> <p id="img1"></p> <p id="img2"></p> </p> </p> </body> </html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
仅使用css实现背景图片切换并滑动
逻辑：运用雪碧图把两张图片合并为一张图片，使用transition和background-position两个属性实现滑动切换.
demo：http://runjs.cn/detail/btbjrwwr