CSS图片切换动画效果
css 的图片转换效果，纯样式搞定，不借助一行 JS，挺适合做些轻量级交互。你只要切两张图，前后状态不一样，切换的时候加个类名，CSS 的 transition 和 transform 就能玩出花来。嗯，响应也快，兼容性也还不错。
前面我试着做了个 hover 的缩放加淡入淡出，像这样：
.img-box:hover img {
transform: scale(1.1);
opacity: 0.7;
transition: all 0.3s ease-in-out;
}你看，就这几行就能搞个挺有质感的交互。
适合用在哪儿呢？比如产品展示页、图片轮播、鼠标经过的动效啥的。省事、省资源。比起用 JavaScript 或 Canvas，用 CSS 的方式真是轻盈又好调试。
如果你想玩得再深一点，比如搞点滤镜、图像反转之类的，也可以看看下面这些资源，里面有 Opencv、Jimp 等等，适合不同语言的朋友：
如果你是前端，建议优先试试 CSS 的滤镜，像 filter: grayscale(100%) 或 filter: invert(1)，直接上，效果立马见。
哦对了，转换图像记得图片大小尽量一致，省得布局抖动。要是你图片数量多，建议结合 lazyload，性能提升也会。
文件大小：272.93KB
评论区