css3实现鼠标经过图片放大的动画（css3放大图片，实现图片缩放，不改变高宽大小）时间过得真快，还记得刚开始学前端去找

时间过得真快，还记得刚开始学前端去找工作的时候，面试官，让我做一个图片放大的效果，我那会没接触css3，图片是放大了，但是没有动画。所以面试没过。也恨那时候自己没有好好争取复试，技术差不丢人，不愿意学习才是。那天面试完之后，回家看了几分钟教程就会了。所以机试的时候一定要沉着、冷静，不要像我这样。

<!DOCTYPE HTML>
<meta charset = 'utf-8'>
<html>
<head>
<title>css3实现鼠标经过图片放大的动画</title>
<style>
    div.charg{
        width:200px;
        height:200px;
        overflow:hidden;
    }
    div img.dong{
        width:200px;
        height:200px;
        transition:all 2s;
    }
    div img.dong:hover{
        transform:scale(1.5);
    }
</style>
</head>
<body>
    <div class = 'charg'>
        <img class = 'dong' src = '123.jpg'>   
    </div>
</body>
</html>

transform:scale(1.5);的意思是图片放大1.5倍；transform可以理解为改变形态，后面的属性就是定义具体怎么改变；通俗点说，就是动画开始前，你准备让它怎么变，是放大还是旋转，都是通过transform来申明，这是动画的开端。

transition：all 2s;的意思是全部动画在2s内完成，transition可以理解为过度，后面的属性是定义具体的时间跟具体过度属性；通俗说就是定义了动画的时间和具体要改变的属性，比如高度，宽度等等。