图片切换直接生硬地跳一下确实不太好看但用JS动画库又有点重。其实CSS自己就能搞定transition配合filter的blur函数几行样式的事。原理说穿了很简单。transition控制过渡的时长和缓动filter的blur控制模糊程度。图片从blur(10px)过渡到blur(0)自然就有了从模糊到清晰的效果。再叠一层opacity变化两张图切换的时候会更顺。直接上代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classimage-container img srcimage1.jpg altImage 1 classvisible img srcimage2.jpg altImage 2 classhidden /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.8sopacity用0.5s切换节奏会有细微差别看需求调整。.hidden状态给了blur(10px)加opacity: 0。这里有个细节如果只给opacity: 0不给blur过渡就只是淡入淡出模糊效果出不来。blur的初始值越大切换时模糊感越强10px算是比较明显的效果改小一点会更克制。来此加密不仅是证书申请工具更是完整的自动化平台。开放API接口让您自定义验证与部署流程无论HTTP代理还是DNS接口都能无缝对接实现企业级SSL全生命周期管理。JS那部分就是切换class没什么好说的。两张图轮流加visible和hiddensetInterval控制间隔。实际项目里你可以把setInterval换成点击触发或者滚动触发逻辑一样。性能这块需要留意。blur是GPU加速的属性但不是说随便用都没代价。模糊半径越大移动端上越容易掉帧尤其图片尺寸大的时候。我试过在低端安卓机上跑blur(20px)的过渡掉帧很明显。一般来说10px以内问题不大超过这个值最好在真机上测一下。浏览器兼容性基本不用担心filter和blur现代浏览器都支持。非要兼容IE的话这条路走不通但都这个年代了也没必要。实际用的时候还有个小坑。如果图片加载慢切换时可能会白屏一下。解决办法也简单提前预加载图片或者用background-image代替img标签。线上环境图片走HTTPS的话加载效率会好一些证书配置如果不想折腾可以用lcjmSSL这类免费申请的平台自动续期省得过期了图片全挂。最后说一句这个方案的优点是不引入任何依赖纯CSS加几行原生JS就能跑。适合轮播图、相册切换、头图过渡这些场景。如果要做更复杂的过渡效果比如多张图连续切换带缩放建议还是上成熟的动画方案纯手写会越来越难维护。