怎么用filter和transform-style属性创建视觉3D特效

技术怎么用filter和transform-style属性创建视觉3D特效这篇文章主要讲解了“怎么用filter和transform-style属性创建视觉3D特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟

本文主要讲解“如何使用滤镜和变换样式的属性来创建视觉3D效果”。本文的讲解内容简单明了,易学易懂。请跟随边肖的思路,学习和学习“如何使用滤镜和变换式属性创建视觉3D效果”。

怎么用filter和transform-style属性创建视觉3D特效

众所周知,在正常的视觉效果中,我们离自己越近,通常看得越清晰,而离得越远,看得越不清晰~

我们可以用清晰模糊来构建视差效果。像这样:

怎么用filter和transform-style属性创建视觉3D特效

在CSS中,我们可以使用模糊过滤器filter: blur()和transform-style:press-3d来实现它们。

00-1010首先我们需要实现一个人物的3D变换,相对简单。主要是借助transform-style : preserve-3d和透视,让文字围绕y轴旋转。

简单的代码如下:

PCs 3d effect/Pb body {

透视:160 vmin;

}

p{

font-size :24 vmin;

transform-style : preserve-3d;

animate : rotatee 10 sinfinitease in-out;

}

@keyframesrotate{

0%{

transform : rotatey(-45);

}

50%{

transform : rotatey(45度);

}

100%{

transform : rotatey(-45);

}

}我们可以得到这样的3D文字效果:

怎么用filter和transform-style属性创建视觉3D特效

实现一个文字的 3D 变换

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

但是,每个文本都需要细化,上面的HTML结构不能单独处理每个文本。让我们简单地转换一下结构:

p

spanC/span

跨度/跨度

跨度/跨度

span3/span

spanD/span

spanE/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 让文字更立体点

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

怎么用filter和transform-style属性创建视觉3D特效

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

https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect

使用模糊构建落叶效果

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

譬如下面这个落叶效果,就是利用模糊以及简单的层级关系,让整个画面看上去非常的真实:

<h3>Falling Leaves</h3>
<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);
  }
}

怎么用filter和transform-style属性创建视觉3D特效

主要就是通过清晰模糊两种状态的对比,速度的差异,来构建视差效果。

感谢各位的阅读,以上就是“怎么用filter和transform-style属性创建视觉3D特效”的内容了,经过本文的学习后,相信大家对怎么用filter和transform-style属性创建视觉3D特效这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/66408.html

(0)

相关推荐

  • 呼风唤雨的意思,呼风唤雨的意思及成语故事

    技术呼风唤雨的意思,呼风唤雨的意思及成语故事呼风唤雨 拼音呼风唤雨的意思:hū fēng huàn yǔ
    近义词:兴风作浪、推波助澜、兴妖作怪
    反义词:息事宁人
    用法:联合式;作谓语、宾语、定语、状语;比喻具有非凡

    生活 2021年11月1日
  • 如何使用FiddlerScript

    技术如何使用FiddlerScript如何使用FiddlerScript,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。没有用过Fiddler

    攻略 2021年11月17日
  • 中国征信中心,中国人民银行个人征信中心

    技术中国征信中心,中国人民银行个人征信中心1. 登录 点击首页“核心业务”项下的“互联网个人信用信息 服务平台” ——进入查询页面 ——点击“马上开始”
    ——经过新用户注册 ——用户登录 在线身份验证
    ——填写提交查

    生活 2021年11月1日
  • SQL优化技巧有哪些

    技术SQL优化技巧有哪些这篇文章主要讲解了“SQL优化技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“SQL优化技巧有哪些”吧!一、索引优化索引的数据结构是 B+

    攻略 2021年11月12日
  • 身高英语,身高和年龄用英语怎么说

    技术身高英语,身高和年龄用英语怎么说hallo,mynameis(姓名),i`m(年龄)yearsold.i`mform(地名),myheightis(数字)centimeter.mybirthdayis(生日)ilik

    生活 2021年10月19日
  • dbms_xplan.display_cursor包与高级所有统计上次查看绑定区别是什么

    技术dbms_xplan.display_cursor包与ADVANCED ALLSTATS LAST PEEKED_BINDS区别是什么dbms_xplan.display_cursor包与ADVANCED ALLST

    攻略 2021年12月24日