CSS图片模糊过渡：一个transition加filter就够

图片切换直接生硬地跳一下确实不太好看，但用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就能跑。

适合轮播图、相册切换、头图过渡这些场景。如果要做更复杂的过渡效果，比如多张图连续切换带缩放，建议还是上成熟的动画方案，纯手写会越来越难维护。