要点：
1、transition有四个属性，注意时间曲线和延时可以省略，默认分别是ease和0
2、注意切换的原理类似滑动门，遮住一部分，图片的宽度比显示宽度要大
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 183px;
height: 130px;
border: 1px solid red;
overflow: hidden;
/*高度不怎么改变，注意变化的10px宽度*/
}
div img{
width: 193px;
height: 130px;
transition: all 0.4s;
/*指定变化的对象和执行时间*/
}
div:hover img{
margin-left: -10px;
/*达到将图片向左移动10px的效果，类似滑动门的效果*/
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
</body>
</html>效果：
