怎么用过滤器和传输格式属性创建视觉3 d特效

　　介绍

这篇文章主要讲解了“怎么用过滤器和传输格式属性创建视觉3 d特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么用过滤器和传输格式属性创建视觉3 d特效”吧!

怎么用过滤器和传输格式属性创建视觉3 d特效

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

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

怎么用过滤器和传输格式属性创建视觉3 d特效

而在CSS中,我们可以利用模糊滤镜<代码>过滤器:模糊()与<代码>传输格式:preserve-3d>

实现一个文字的3 d变换

首先,我们需要实现一个文字的3 d变换,这个比较简单,主要是借助<代码>传输格式:preserve-3d 和<代码> 角度来看,以及让文字绕Y轴进行旋转即可。

简单的代码如下:

& lt; p> CSS3DEFFECT

body  { 　　,,,的观点:,160 vmin; 　　} 　　 　　p  { 　　,,,字体大小:,24 vmin; 　　,,,传输格式:,preserve-3d; 　　动画:,,,,rotate  10 s  infinite  ease-in-out; 　　} 　　 　　@keyframes  rotate  { 　　,,,0%,{ 　　,,,,,,,变换:,rotateY(-45度); 　　,,,} 　　,,,50%,{ 　　,,,,,,,变换:,rotateY(45度); 　　,,,} 　　,,,100%,{ 　　,,,,,,,变换:,rotateY(-45度); 　　,,,} 　　}

我们就可以得到这样一个3 d文字效果:

怎么用过滤器和传输格式属性创建视觉3 d特效

实现文字的模糊

这个效果已经有了初步的3 d效果,但是仅仅是这样,会觉得少了些什么。接下来我们就需要补充一下模糊的效果,让距离我们近的文字清晰,远离我们的文字模糊。

但这样就需要对每个文字进行精细化处理,上面的HTML结构无法做到对每一个文字的单独处理,我们简单改造一下结构:

& lt; p> 　　,,,& lt; span> C 　　,,,& lt; span> S 　　,,,& lt; span> S 　　,,,& lt; span> 3 & lt;/span> 　　,,,& lt; span> D 　　,,,& lt; span> E 　　,,,& lt; span> F 　　,,,& lt; span> F 　　,,,& lt; span> E 　　,,,& lt; span> C 　　,,,& lt; span> T 　　& lt;/p>

完整的代码大概是这样:

@import  url (https://fonts.googleapis.com/css2?family=Lobster& & # 39;;显示=交换# 39;); 　　 　　数:美元,12; 　　 　　的身体,,html  { 　　,,,字体类型:,& # 39;龙虾# 39;,,草书; 　　,,,的观点:,160 vmin; 　　,,,溢出:,隐藏; 　　} 　　 　　p  { 　　,,,保证金:,汽车; 　　,,,字体大小:,24 vmin; 　　,,,传输格式:,preserve-3d; 　　动画:,,,,rotate  10 s  infinite  ease-in-out; 　　,,,, 　　,,,span  { 　　,,,,,,,文本阴影:, 　　,,,,,,,,,,,1 px  1 px  0, rgba (0, 0, 0,,。9), 　　,,,,,,,,,,,2 px  2 px  0, rgba (0, 0, 0,, 7), 　　,,,,,,,,,,,3 px  3 px  0, rgba (0, 0, 0, 0。5), 　　,,,,,,,,,,,4 px  4 px  0, rgba (0, 0, 0,,。3), 　　,,,,,,,,,,,5 px  5 px  0, rgba (0, 0, 0, 1。); 　　,,,,,,, 　　,,,,,,,,:nth-child (- n + 5), {, 　　,,,,,,,,,,,animation-delay:, 5 s,, 　　,,,,,,,} 　　,,,} 　　} 　　 　　@for 小姐:美元得到1,用7,{ 　　,,,跨度:nth-child (# {$ i}),, 　　,,,跨度:nth-last-child (# {$ i}), { 　　,,,,,,,动画:,filterBlur - #{$我},10 s  infinite  ease-in-out; 　　,,,} 　　 　　,,,@keyframes  filterBlur - #{$我},{ 　　,,,,,,,0%,{ 　　,,,,,,,,,,,过滤器:,模糊(0 px),对比(5); 　　,,,,,,,} 　　,,,,,,,50%,{ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么用过滤器和传输格式属性创建视觉3 d特效