html5 - CSS样式，鼠标移入改变图片。
鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。
Maison > Questions et réponses > le corps du texte
鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。
怪我咯2017-04-17 12:07:48
仅使用css实现背景图片切换并滑动
逻辑：运用雪碧图把两张图片合并为一张图片，使用transition和background-position两个属性实现滑动切换.
demo：http://runjs.cn/detail/btbjrwwr
PHPz2017-04-17 12:07:48
我随手写了一个，题主可以看看实现思路
另外题主要学会用搜索引擎，这种搜索一大把
<!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>