利用模糊实现视觉3D效果实例讲解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">实现一个文字的 3D 变换</a></li><li><a href="#_label1">实现文字的模糊</a></li><li><a href="#_label2">使用模糊构建落叶效果</a></li></ul></div><p>本文较短，将介绍巧用模糊实现视觉 3D 效果的技巧。</p><p>我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~</p>
<p>我们可以利用清晰与模糊两种状态来构建视差效果。像是这样：</p>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202109/202193103054895.gif?202183103113" /></p>
<p>而在 CSS 中，我们可以利用模糊滤镜 <code>filter: blur()</code> 与 <code>transform-style: preserve-3d</code> 来实现它们。</p>
<p class="maodian"><a name="_label0"></a></p><h2>实现一个文字的 3D 变换</h2>
<p>首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 <code>transform-style: preserve-3d</code> 和 <code>perspective</code>，以及让文字绕 Y 轴进行旋转即可。</p>
<p>简单的代码如下：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<p>CSS3DEFFECT</p></pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
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);
}
}</pre>
</div>
<p>我们就可以得到这样一个 3D 文字效果：</p>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202109/202193103142178.gif?20218310322" /></p>
<p class="maodian"><a name="_label1"></a></p><h2>实现文字的模糊</h2>
<p>这个效果已经有了初步的 3D 效果，但是仅仅是这样，会觉得少了些什么。接下来我们就需要补充一下模糊的效果，让距离我们近的文字清晰，远离我们的文字模糊。</p>
<p>但这样就需要对每个文字进行精细化处理，上面的 HTML 结构无法做到对每一个文字的单独处理，我们简单改造一下结构：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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></pre>
</div>
<p>完整的代码大概是这样：</p>
<div class="jb51code">
<pre class="brush:css;">
@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;
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);
}
}</pre>
</div>
<p>简单解析下，这里有几个小技巧，仔细观察我们需要的效果：</p>
<p style="margin-left: 40px">1.第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 <code>:nth-child</code> 和 <code>:nth-last-child</code> 高效编写 CSS 代码</p>
<p style="margin-left: 40px">2.每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 <code>animation-delay</code> 让一半的动画延迟一半进行</p>
<p style="margin-left: 40px">3.可以再配合 <code>text-shadow</code> 让文字更立体点</p>
<p>这样，我们可以最终得到如下效果：</p>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202109/202193103239836.gif?202183103258" /></p>
<p>完整的代码，你可以戳这里 -- <a rel="external nofollow" target="_blank" href="https://csscoco.com/inspiration/">CSS 灵感 -- 利用 filter:blur 增强文字的 3D 效果</a></p>
<p class="maodian"><a name="_label2"></a></p><h2>使用模糊构建落叶效果</h2>
<p>合理运用模糊，是能在没有 <code>transform-style: preserve-3d</code> 和 <code>perspective</code> 的加持下，也能构建出不错的 3D 效果。</p>
<p>之前在 Youtube 的一个视频教学网站看到了下面这个落叶效果，就是利用模糊以及简单的层级关系，让整个画面看上去非常的真实：</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<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></pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
.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);
}
}</pre>
</div>
<p style="text-align: center"><img alt="" src="https://img.jbzj.com/file_images/article/202109/202193103350382.gif?202183103413" /></p>
<p>主要就是通过清晰与模糊两种状态的对比，速度的差异，来构建视差效果。</p>
<p><a rel="external nofollow" target="_blank" href="https://codepen.io/Chokcoco/pen/vYyGVZZ">CodePen Demo -- Falling leaves</a></p>
<p>以上就是利用模糊实现视觉3D效果实例讲解的详细内容，更多关于模糊实现视觉3D的资料请关注琼殿技术社区其它相关文章！</p>
頁:
[1]