필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기-CSS 튜토리얼-php.cn

필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기

青灯夜游

풀어 주다： 2021-11-02 19:21:18

앞으로

2139명이 탐색했습니다.

이 기사에서는 시각적 3D 효과를 얻기 위해 흐림을 사용하는 기술을 소개하고, 시각적 3D 효과를 얻기 위해 필터 및 변형 스타일 속성을 사용하는 방법을 살펴보겠습니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기

우리 모두는 일반적인 시각 효과에서 우리가 가까울수록 더 선명하게 보이고, 멀리 있을수록 상대적으로 덜 선명하다는 것을 알고 있습니다~

우리는 Clear 및 Blur를 사용할 수 있습니다. 시차 효과를 생성하는 두 가지 상태.

필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기

그리고 CSS에서는 흐림 필터 filter: Blur() 및 transform-style: Preserve-3d를 사용하여 구현할 수 있습니다. filter: blur() 与 transform-style: preserve-3d 来实现它们。

实现一个文字的 3D 变换

首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 transform-style: preserve-3d 和 perspective，以及让文字绕 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 효과 만들기

实现文字的模糊

这个效果已经有了初步的 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(&#39;https://fonts.googleapis.com/css2?family=Lobster&display=swap&#39;);

$count: 12;

body, html {
    font-family: &#39;Lobster&#39;, 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);
    }
}

로그인 후 복사

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

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

这样，我们可以最终得到如下效果：

필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기

完整的代码，你可以戳这里 -- CSS 灵感 -- 利用 filter:blur 增强文字的 3D 效果
https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect

使用模糊构建落叶效果

合理运用模糊，是能在没有 transform-style: preserve-3d 和 perspective

텍스트의 3D 변환 구현

먼저 텍스트의 3D 변환을 구현해야 하는데 비교적 간단합니다. 주로 transform-style: presents-3d 및 perspective를 사용하고 텍스트가 Y축을 중심으로 회전하도록 합니다.

필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기 간단한 코드는 다음과 같습니다:

<h2>Falling Leaves</h2>
<section>
  <div class="leaf">
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></div>
    <div><img  src="落叶图片.png" / alt="필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기" ></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);
  }
}

로그인 후 복사

이러한 3D 텍스트 효과를 얻을 수 있습니다: 필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기 텍스트 흐림 달성

이 효과는 이미 예비적인 3D 효과를 가지고 있지만 이대로라면 뭔가 빠진 느낌이 들 것입니다. 다음으로, 가까운 텍스트는 선명하게, 멀리 있는 텍스트는 흐릿하게 만드는 흐림 효과를 추가해야 합니다.
그러나 이를 위해서는 각 텍스트의 세부적인 처리가 필요합니다. 위의 HTML 구조는 각 텍스트를 개별적으로 처리할 수 없습니다. 간단히 구조를 변환해 보겠습니다.
rrreee
전체 코드는 다음과 같습니다.

rrreee

간단한 분석 결과는 다음과 같습니다. 필요한 효과를 주의 깊게 관찰하기 위한 팁:

첫 번째 문자와 마지막 문자는 가장 왼쪽 효과와 가장 오른쪽 회전 효과에서 각각 우리에게 가장 가깝고 가장 멀 것입니다. 그 효과는 실제로 동일해야 합니다. , 따라서 첫 번째 문자와 마지막 문자는 균일하게 처리되어야 하고, 두 번째 문자와 끝에서 두 번째 문자는 균일하게 처리되어야 합니다. 여기서 SASS를 사용하여 :nth-child 및 :nth-last-child 효율적으로 CSS 코드 작성
반은 선명하고 반은 흐릿할 때마다 animation-delay를 사용하여 다르게 처리해야 합니다. > 애니메이션의 절반을 지연시킵니다
text-shadow와 결합하여 텍스트를 더욱 3차원적으로 만들 수 있습니다

이런 식으로 우리는 마침내 다음 효과를 얻을 수 있습니다:

3- 1.gif

전체 코드를 보려면 여기를 클릭하세요--CSS 영감--필터:블러를 사용하여 텍스트의 3D 효과 향상🎜🎜https://csscoco.com/inspirion/#/. / filter/use-filter-blur-enhance-text-3d-효과🎜🎜🎜블러를 사용하여 떨어지는 나뭇잎 효과 만들기🎜🎜블러를 적절하게 사용하면 transform-style: Preserve-3d 없이 작동할 수 있습니다. perspective 지원으로 좋은 3D 효과도 만들 수 있습니다. 🎜🎜예를 들어 아래 낙엽 효과는 흐림 효과와 단순한 계층 관계를 사용하여 전체 그림을 매우 사실적으로 보이게 만듭니다. 🎜rrreeerrreee🎜🎜🎜🎜 주로 🎜clear🎜 및 🎜blurred🎜 두 가지 상태를 비교하여 속도를 시차 효과를 생성하기 위한 차이입니다. 🎜🎜🎜CodePen 데모 -- 낙엽🎜🎜https://codepen.io/Chokcoco/pen/vYyGVZZ🎜🎜🎜Finally🎜🎜자, 이것으로 이 글이 끝났습니다. 여러분에게 도움이 되길 바랍니다 :) 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 필터 및 변환 스타일 속성을 현명하게 사용하여 시각적 3D 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!