关于前端:巧用模糊实现视觉的-3D-效果

本文将介绍巧用含糊实现视觉 3D 成果的技巧。

咱们都晓得，在失常的视觉效果中，离咱们越近的通常咱们会看的越清晰，而离咱们较远则绝对没那么清晰~

咱们能够利用 清晰 与含糊 两种状态来构建视差成果。像是这样：

而在 CSS 中，咱们能够利用含糊滤镜 filter: blur() 与 transform-style: preserve-3d 来实现它们。

实现一个文字的 3D 变换

首先，咱们须要实现一个文字的 3D 变换，这个比较简单。次要是借助 transform-style: preserve-3d 和 perspective，以及让文字绕 Y 轴进行旋转即可。

简略的代码如下：

<p>CSS3DEFFECT</p>

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 构造无奈做到对每一个文字的独自解决，咱们简略革新一下构造：

<p>
    <span>C</span>
    <span>S</span>
    <span>S</span>
    <span>3</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>F</span>
    <span>E</span>
    <span>C</span>
    <span>T</span>
</p>

残缺的代码大略是这样：

$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;
    
    span {
        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 {span:nth-child(#{$i}), 
    span: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 高效编写 CSS 代码
2. 每次有一半是清晰的，一半的是含糊的，须要辨别看待，利用 animation-delay 让一半的动画提早一半进行
3. 能够再配合 text-shadow 让文字更平面点

这样，咱们能够最终失去如下成果：

残缺的代码，你能够戳这里 — CSS 灵感 — 利用 filter:blur 加强文字的 3D 成果

应用含糊构建落叶成果

正当使用含糊，是能在没有 transform-style: preserve-3d 和 perspective 的加持下，也能构建出不错的 3D 成果。

譬如上面这个落叶成果，就是利用含糊以及简略的层级关系，让整个画面看上去十分的实在：

<h2>Falling Leaves</h2>
<section>
  <div class="leaf">
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
    <div><img src="落叶图片.png" /></div>
  </div>
  <div class="leaf leaf2">
    // 反复第二组
  </div>
  <div class="leaf leaf3">
    // 反复第三组
  </div>
</section>

.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);
  }
}

次要就是通过 清晰 与含糊 两种状态的比照，速度的差别，来构建视差成果。

CodePen Demo — Falling leaves

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 成果能够关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。