在这里就简单的放了一张图片。来说明hover生硬的问题。现在来看，第一个代码可以实现放大缩小了。但是问题随之来了。体验太差了。这不是我想要的。。。。改进

<style>

　　img { 　　　　width: 100px; 　　　　height: 100px; 　　　　/*border-radius: 50%; 　　　　margin-left: 45%; 　　　　margin-top: 10%;*/ 　　}

　　img:hover {

　　　　/*放大图片1.3表示放大的倍数*/ 　　　　transform: scale(1.3, 1.3); 　　}

</style>

<img src="img/bizhi.jpg" />

改进后效果好了一点，当鼠标获取到图片的焦点时，有了动画效果。但是问题又来了。。。。。失去焦点时太难看了。。。。改进

<style>

　　img { 　　　　width: 100px; 　　　　height: 100px; 　　　　/*border-radius: 50%; 　　　　margin-left: 45%; 　　　　margin-top: 10%;*/ 　　} 　　img:hover { 　　　　/*放大图片1.3表示放大的倍数*/ 　　　　transform: scale(1.3, 1.3); 　　　　/*在hover里面加上效果完成的时间*/ 　　　　transition: all 0.5s linear; 　　} </style> <img src="img/bizhi.jpg" />

 

最后问题解决了。我们应该在变化的元素上加上和hover里面一样的效果。才能在失去焦点时继续完成动画。。。。

<style> 　　img { 　　　　width: 100px; 　　　　height: 100px; 　　　　/*border-radius: 50%; 　　　　margin-left: 45%; 　　　　margin-top: 10%;*/ 　　　　transition: all 0.5s linear; 　　} 　　img:hover { 　　　　/*放大图片1.3表示放大的倍数*/ 　　　　transform: scale(1.3, 1.3); 　　　　/*在hover里面加上效果完成的时间*/ 　　　　transition: all 0.5s linear; 　　} </style> 　　<img src="img/bizhi.jpg" />