css放大图片特效

前段时间需要做到一个很普通的功能，即鼠标指向图片，图片直接放大，本来想要用js事件管理监听鼠标移动时事件，在里面写放大缩小代码，突然发觉有些麻烦，于是在网上寻找各种资料，发现css3有个特性，:hover 选择器，这个选择器，用于 选择鼠标指针浮动在其上的元素，并设置其样式。使用改选择器，直接获取了当前鼠标所指向的图片之后，我们直接编写放大图片的样式即可。

img:hover {
	transform: scale(3);
}

这样我们就实现了简单的鼠标指向即放大代码，鼠标离开，就恢复原样的功能。

同时为了有一个简单的放大动画，我们再在该img中增加一个transition属性，该属性是用来设置过渡效果的，我们将第一个参数设置为all，即针对所有属性全部生效，过渡时间为0.6秒钟。cursor属性用来决定指针样式，这里pointer属性是指一个手指指针形状的图标。

img {
	cursor: pointer;
	transition: all 0.6s;
}