纯css实现slide效果
尝试一下，仅作记录。
<!DOCTYPE html>
<html>
<head>
<style>
*{transition:all 1s ease 0s;}
#showSlide{300px;height:200px;overflow:hidden; border:20px solid #ccc;box-shadow:1px 1px 3px rgba(0,0,0,1); }
#inner{}
.slide{300px;height:200px;display:inline-block;}
label{border-radius: 5px;display: inline-block; 10px;height: 10px;background: #ccc;cursor:pointer;}
input{display:none}
#slide1:hover ~ #showSlide #inner{margin-top:0;}
#slide2:hover ~ #showSlide #inner{margin-top:-200px;}
#slide3:hover ~ #showSlide #inner{margin-top:-400px;}
#slide4:hover ~ #showSlide #inner{margin-top:-600px;}
label:hover{background:#000;}
</style>
</head>
<body>
<input checked="checked" name="slider" ></label>
</div>
</body>
</html>