爱刨根知识网

  1. 首页 > 经验知识 > >

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

生活百科生活经验

这样，我们可以最终得到如下效果：
完整的代码，你可以戳这里 CSS 灵感 利用 filter:blur 增强文字的 3D 效果
https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect
使用模糊构建落叶效果合理运用模糊，是能在没有 transform-style: preserve-3d 和 perspective 的加持下，也能构建出不错的 3D 效果 。
譬如下面这个落叶效果，就是利用模糊以及简单的层级关系，让整个画面看上去非常的真实：
h3 Falling Leaves /h3sectiondiv>.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特效这一问题有了更深刻的体会，具体使用情况还需要大家实践验证 。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

    推荐阅读


    上一篇：数据库原理知识点有哪些

    下一篇：assert的用法及注意事项有哪些