图片切换直接生硬地跳一下确实不太好看，但用JS动画库又有点重。其实CSS自己就能搞定，transition配合filter的blur函数，几行样式的事。
原理说穿了很简单。
transition控制过渡的时长和缓动，filter的blur控制模糊程度。图片从blur(10px)过渡到blur(0)，自然就有了从模糊到清晰的效果。再叠一层opacity变化，两张图切换的时候会更顺。
直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片模糊过渡效果</title> <style> .image-container { position: relative; width: 300px; height: 200px; overflow: hidden; } .image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 1s ease-in-out, opacity 1s ease-in-out; } .image-container img.hidden { filter: blur(10px); opacity: 0; } .image-container img.visible { filter: blur(0); opacity: 1; } </style> </head> <body> <div class="image-container"> <img src="image1.jpg" alt="Image 1" class="visible"> <img src="image2.jpg" alt="Image 2" class="hidden"> </div> <script> let currentIndex = 0; const images = document.querySelectorAll('.image-container img'); const totalImages = images.length; function switchImage() { images[currentIndex].classList.remove('visible'); images[currentIndex].classList.add('hidden'); currentIndex = (currentIndex + 1) % totalImages; images[currentIndex].classList.remove('hidden'); images[currentIndex].classList.add('visible'); } setInterval(switchImage, 3000); </script> </body> </html>几个关键点拆开说。
容器需要relative定位，两张图absolute叠在同一个位置。overflow: hidden裁掉超出部分。
object-fit: cover保证图片填满容器不变形，这个属性在图片比例不一致的时候特别有用，不加的话图片会被拉伸。
transition那句同时声明了filter和opacity两个属性的过渡，时长都是1s，缓动用的ease-in-out。
可以分开写不同的时长，比如filter用0.8s，opacity用0.5s，切换节奏会有细微差别，看需求调整。
.hidden状态给了blur(10px)加opacity: 0。这里有个细节，如果只给opacity: 0不给blur，过渡就只是淡入淡出，模糊效果出不来。blur的初始值越大，切换时模糊感越强，10px算是比较明显的效果，改小一点会更克制。
来此加密不仅是证书申请工具，更是完整的自动化平台。开放API接口让您自定义验证与部署流程，无论HTTP代理还是DNS接口，都能无缝对接，实现企业级SSL全生命周期管理。
JS那部分就是切换class，没什么好说的。两张图轮流加visible和hidden，setInterval控制间隔。实际项目里你可以把setInterval换成点击触发或者滚动触发，逻辑一样。
性能这块需要留意。blur是GPU加速的属性，但不是说随便用都没代价。模糊半径越大，移动端上越容易掉帧，尤其图片尺寸大的时候。我试过在低端安卓机上跑blur(20px)的过渡，掉帧很明显。一般来说10px以内问题不大，超过这个值最好在真机上测一下。
浏览器兼容性基本不用担心，filter和blur现代浏览器都支持。非要兼容IE的话这条路走不通，但都这个年代了也没必要。
实际用的时候还有个小坑。如果图片加载慢，切换时可能会白屏一下。
解决办法也简单，提前预加载图片，或者用background-image代替img标签。线上环境图片走HTTPS的话加载效率会好一些，证书配置如果不想折腾可以用lcjmSSL这类免费申请的平台，自动续期，省得过期了图片全挂。
最后说一句，这个方案的优点是不引入任何依赖，纯CSS加几行原生JS就能跑。
适合轮播图、相册切换、头图过渡这些场景。如果要做更复杂的过渡效果，比如多张图连续切换带缩放，建议还是上成熟的动画方案，纯手写会越来越难维护。
