利用模糊实现视觉3D效果实例讲解

这篇文章带大家看看如何用模糊这个 CSS 滤镜，玩出视觉上的 3D 效果。听起来有点反直觉？其实原理很简单：在现实世界中，离我们近的物体通常清晰，远的则相对模糊。利用清晰与模糊两种状态的对比，就能构建出视差效果，就像下面这样：

在 CSS 里，模糊滤镜 filter: blur() 配合 transform-style: preserve-3d 就能实现这种效果。

实现一个文字的 3D 变换

先搞定文字本身的 3D 变换。这一步不复杂，核心是用 transform-style: preserve-3d 和 perspective，让文字绕着 Y 轴旋转。

简单代码示例：

CSS3DEFFECT

body {
    perspective: 160vmin;
}
p {
    font-size: 24vmin;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
}
@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
    100% {
        transform: rotateY(-45deg);
    }
}

这样就能得到一个 3D 文字旋转效果：

实现文字的模糊

光有 3D 旋转还差点意思，缺少远近的虚实对比。我们需要让离我们近的文字清晰，远的模糊。但每个文字的位置不同，得单独处理。

把 HTML 结构拆开，每个字母一个元素：

    
C
    
S
    
S
    
3
    
D
    
E
    
F
    
F
    
E
    
C
    
T

完整 CSS 代码（用 SASS 写更高效）：

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
$count: 12;
body, html {
    font-family: 'Lobster', cursive;
    perspective: 160vmin;
    overflow: hidden;
}
p {
    margin: auto;
    font-size: 24vmin;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
    p {
        text-shadow: 
            1px 1px 0 rgba(0, 0, 0, .9),
            2px 2px 0 rgba(0, 0, 0, .7),
            3px 3px 0 rgba(0, 0, 0, .5),
            4px 4px 0 rgba(0, 0, 0, .3),
            5px 5px 0 rgba(0, 0, 0, .1);
        &:nth-child(-n+5) {
            animation-delay: -5s;
        }
    }
}
@for $i from 1 to 7 {
    p:nth-child(#{$i}), 
    p:nth-last-child(#{$i}) {
        animation: filterBlur-#{$i} 10s infinite ease-in-out;
    }
    @keyframes filterBlur-#{$i} {
        0% {
            filter: blur(0px) contrast(5);
        }
        50% {
            filter: blur(#{7 - $i}px) contrast(1);
        }
        100% {
            filter: blur(0px) contrast(5);
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
    100% {
        transform: rotateY(-45deg);
    }
}

这里面有几个小技巧值得注意：

1. 第一个字符和最后一个字符在旋转过程中分别处于最左和最右，离我们最近和最远的效果其实是对称的，所以它们应该统一处理，第二个字符和倒数第二个同理。利用 SASS 的 :nth-child 和 :nth-last-child 可以高效编写。

2. 每次旋转时，有一半文字清晰，一半模糊，需要用 animation-delay 让一半动画延迟一半周期。

3. 配合 text-shadow 能让文字更立体。

最终效果如下：

使用模糊构建落叶效果

合理运用模糊，即使没有 transform-style: preserve-3d 和 perspective，也能构建出不错的 3D 感。之前在一个视频教学网站看到这个落叶效果，就是利用模糊和简单的层级关系，让画面非常真实。

Falling Lea ves

  

    

    

    

    

    

    

    

  
  

    // 重复第二组
  
  

    // 重复第三组
  

.leaf {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.leaf img {
  width: 75px;
  height: 75px;
}
.leaf div:nth-child(1) {
  left: 20%;
  animation: fall 22s linear infinite;
  animation-delay: -2s;
}
.leaf div:nth-child(2) {
  left: 70%;
  animation: fall 18s linear infinite;
  animation-delay: -4s;
}
.leaf div:nth-child(3) {
  left: 10%;
  animation: fall 21s linear infinite;
  animation-delay: -7s;
}
.leaf div:nth-child(4) {
  left: 50%;
  animation: fall 24s linear infinite;
  animation-delay: -5s;
}
.leaf div:nth-child(5) {
  left: 85%;
  animation: fall 19s linear infinite;
  animation-delay: -5s;
}
.leaf div:nth-child(6) {
  left: 15%;
  animation: fall 23s linear infinite;
  animation-delay: -10s;
}
.leaf div:nth-child(7) {
  left: 90%;
  animation: fall 20s linear infinite;
  animation-delay: -4s;
}
.leaf2 {
  transform: scale(1.6) translate(5%, -5%) rotate(15deg);
  filter: blur(1px);
  z-index: 10;
}
.leaf3 {
  filter: blur(2px);
  transform: scale(0.8) translate(-5%, 10%) rotate(170deg);
}
@keyframes fall {
  0% {
    top: -30%;
    transform: translateX(20px) rotate(0deg);
  }
  20% {
    transform: translateX(-20px) rotate(45deg);
  }
  40% {
    transform: translateX(20px) rotate(90deg);
  }
  60% {
    transform: translateX(-20px) rotate(135deg);
  }
  80% {
    transform: translateX(20px) rotate(180deg);
  }
  100% {
    top: 150%;
    transform: translateX(-20px) rotate(225deg);
  }
}

核心思路就是通过清晰与模糊的对比，加上不同的下落速度，来构建出纵深视差效果。三种叶子图层分别设置不同的模糊程度、缩放比例和旋转角度，模拟出近景、中景、远景的层次感。