有个朋友N久没有动前端，最近因为需求和人手不得不硬着头皮拾起它。 有个需求是图片放大浏览，因为时间紧没有时间学新的如
react等，所以还是用jq，一直在找插件，但是都不太满意。所以问我有没推荐。我想了想，要引入新的插件开销还是有的，可以使用CSS3新特性。transform有个方法scale就是实现缩放的，再配合上animation不要太简单。
不过此前还有个问题，图片放大之后不能影响到现有的盒子结构。所以在图片父元素上给个相对定位，图片使用绝对定位即可。
下面是随意写的小demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale test</title>
<style>
@keyframes transform-test {
to {
transform: scale(2);
}
}
.img-box {
position: relative;
width:200px;
margin:200px auto 0;
}
.img {
position: absolute;
}
.img:hover {
/*加上fill-mode forwards，使得动画结束后保持*/
animation: 1s transform-test forwards;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="img-box">
<div class="img">
<img src="./test.jpg" alt="" class=""/>
</div>
</div>
</body>
</html>上面实现的是hover时图片放大两倍。如果要实现click效果也好办，click后换个class，在这个class里直接写上animation即可。
在我的github里也有整理关于animation和transform的知识点。不过animation相关并非原创，所以就不传上来了。各位想深入些可以跳转页面：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。