本文较短,将介绍巧用模糊实现视觉 3D 效果的技巧。

我们都知道,在正常的视觉效果中,离我们越近的通常我们会看的越清晰,而离我们较远则相对没那么清晰~

我们可以利用清晰模糊两种状态来构建视差效果。像是这样:

而在 CSS 中,我们可以利用模糊滤镜 filter: blur()transform-style: preserve-3d 来实现它们。

实现一个文字的 3D 变换

首先,我们需要实现一个文字的 3D 变换,这个比较简单。主要是借助 transform-style: preserve-3dperspective,以及让文字绕 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>

完整的代码大概是这样:

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

简单解析下,这里有几个小技巧,仔细观察我们需要的效果:

  1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远,它们的效果其实应该是一致的,所以第一个字符和最后一个字符应该统一处理,依次类推,第二个字符和倒数第二字符统一处理,这里可以借助 SASS 利用 :nth-child:nth-last-child 高效编写 CSS 代码
  2. 每次有一半是清晰的,一半的是模糊的,需要区分对待,利用 animation-delay 让一半的动画延迟一半进行
  3. 可以再配合 text-shadow 让文字更立体点

这样,我们可以最终得到如下效果:

完整的代码,你可以戳这里 -- CSS 灵感 -- 利用 filter:blur 增强文字的 3D 效果

使用模糊构建落叶效果

合理运用模糊,是能在没有 transform-style: preserve-3dperspective 的加持下,也能构建出不错的 3D 效果。

之前在 Youtube 的一个视频教学网站看到了下面这个落叶效果,就是利用模糊以及简单的层级关系,让整个画面看上去非常的真实:

<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

最后

好了,本文到此结束,希望对你有帮助

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

巧用模糊实现视觉的 3D 效果的更多相关文章

  1. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

  2. 60.自己定义View练习(五)高仿小米时钟 - 使用Camera和Matrix实现3D效果

    *本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 本文出自:猴菇先生的博客 http://blog.csdn.net/qq_31715429/article/details/546 ...

  3. CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局

    1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...

  4. transition过渡2D、3D效果

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 帧动画:通过一帧 ...

  5. 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...

  6. CSS3打造3D效果——perspective transform的深度剖析

    声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...

  7. CSS3 文本3D效果

    代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...

  8. css3 3d效果及动画学习

    css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...

  9. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

随机推荐

  1. 运行ride.py报错,闪退

    报错信息如下: F:\Python3.8\Scripts>python ride.py<class 'robotide.preferences.configobj.UnreprError' ...

  2. js中的 true 与 false

    可判断为 false 的情况: 0,-0,NaN,undedined,"",false,null,缺省的值 可判断为 true 的情况: 除false的其他情况均可,包括负数.&q ...

  3. windows7查看和关闭占用的端口

    1. 查看占用的端口 cmd 后输入命令:netstat -aon|findstr [要查的端口] 如欲查端口1099,输入:netstat -aon|findstr 1099 2. 关闭占用的端口 ...

  4. sqlite无法保存数据

    springboot使用连接sqlite数据,使用jdbc:sqlite::resource:db/XXX.db方式连接数据库为只读,使用绝对路径才可以写入.

  5. 浅析java中的IO流

    在java中IO类很庞大,初学的时候觉得傻傻分不清楚.其实java流归根结底的原理是普通字节流,字节缓冲流,转换流.最基础的是普通字节流,即从硬盘读取字节写入到内存中,但在实际使用中又发现一些特殊的需 ...

  6. 【原创】case、casez和casex谁是谁

    在Verilog中case语句经常用于多分支表决的结构,case后的表达式会与各分支表达式"全等"那么对应的分支会被执行.其基本结构如下: case(expression) exp ...

  7. 【抬杠.NET】如何进行IL代码的开发

    背景 在有些时候,由于C#的限制,或是追求更高的性能,我们可以编写IL代码来达到我们的目的.本文将介绍几种IL代码开发的几种方式,环境为visual studio 2019 + net5.0 sdk. ...

  8. 计算机网络part2——物理层

    物理层概述 1.物理层基本概念 物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒体. 主要任务:确定与传输媒体接口有关的一些特性 特性: 机械特性 电气特性 功能特性 规 ...

  9. vue日记②之兼容各种情况的可跳转链接

    兼容各种情况的可跳转链接 需求 因为聊天气泡颜色原因,发送出去的链接通常模糊不清,而且不能直接跳转,所以我打算已a链接的显示直接抓取所有的网页链接,同时还要兼容富文本框的直接输入图片 这是运行效果 实 ...

  10. git的基本操作命令与基础

    本文针对window用户进行git操作 1.git是分布式版本控制系统,需要用户名和邮箱作为一个标识.在任何文件夹中点击右键,选择Git Bash Here ,配置全局用户名和邮件或者局部用户名和邮件 ...