鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。
欢迎选择我的课程，让我们一起见证您的进步~~
僅使用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>
僅使用css實現背景圖片切換並滑動
邏輯：運用雪碧圖把兩張圖片合併為一張圖片，使用transition和background-position兩個屬性實現滑動切換.
demo：http://runjs.cn/detail/btbjrwwr