84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
鼠标移入图片换为第二张图片,第二张图片从下向上滑动。鼠标移出,第二张图片向下滑动露出第一张图片。
欢迎选择我的课程,让我们一起见证您的进步~~
仅使用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