html5 - CSS样式，鼠标移入改变图片。
鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。
怪我咯2017-04-17 12:07:48
Use only css to switch background images and slide them
Logic: Use a sprite image to merge two pictures into one picture, and use the two attributes transition and background-position to implement sliding switching.
demo: http://runjs.cn/detail/btbjrwwr
PHPz2017-04-17 12:07:48
I wrote one casually, you can take a look at the implementation ideas
In addition, you need to learn to use search engines, there are a lot of such searches
<!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>