흐릿하고 거친 연기 효과는 순수한 CSS로도 얻을 수 있습니다!

순수한 CSS를 사용하여 흐릿하고 거친 연기 효과를 얻을 수도 있습니다. 이 기사에서는 순수 CSS를 사용하여 연기 효과를 더 잘 얻을 수 있는지 단계별로 살펴보겠습니다.

이렇게

연기 효과를 주의 깊게 살펴보세요. 두 가지 중요한 기능이 있습니다.

• 흐림 효과
• 거친 느낌

흐림 효과를 먼저 살펴보세요. 먼저 그것에 대해 생각해 보겠습니다. filter: Blur() . filter: blur() 。

当然没错，不过在 CSS 中，除了滤镜，我们还能使用一类其他手段去模拟模糊的效果。

纯 CSS 实现烟雾动画

我们首先来看这样一个效果：

假设，我们有这样一个字符：

<span>C</span>

我们仅仅是通过 text-shadow + opacity 的变化，就能模拟烟雾的效果：

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

看看效果：

在上述的基础上，我们可以加上位移、旋转、缩放，稍微改造一下上述代码，添加一些 transform 变换：

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    transform:
      translate3d(200px, -80px, 0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

就可以得到如下效果：

叠加了 transform 之后，就很有一个字被吹跑，变成烟雾的感觉。在此基础之上，我们只需要将多个字放在一起，利用 animation-delay 顺序控制每个字触发动画效果，即可得到上述的完整烟雾效果。

伪代码如下：

    <span>C</span>
    S
    S
    // ...

// ... 上述所有 CSS 代码

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(($item/10))}s; 
  }
}

就可以得到这样一个被风吹跑的字，幻化成烟雾的效果：

上述效果并非我原创，最早见于这位作者 -- CodePen Demo -- Smoky Text By Bennett Feely

https://codepen.io/bennettfeely/pen/lgybC

借助 SVG feturbulence 滤镜实现烟雾效果

上述的烟雾动画的烟雾还是比较粗糙的。主要是缺少了一点颗粒感？缺少了一些烟雾的质感。

想要实现更为精致的烟雾效果，我们还得借助 SVG 的 <feturbulence></feturbulence> 滤镜

接下来会使用 filter: blur() 配合 <feturbulence></feturbulence> 滤镜，得到更为逼真的烟雾效果。

举个简单的例子，假设有这样几个字：

<div">SMOKE</div>

简单的 CSS：

div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

得到这样几个带渐变色字：

我们利用 <feturbulence></feturbulence> 滤镜简单处理一下：

<div>SMOKE</div>

<svg width="0">
  <filter id="filter">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>

CSS 的中利用 filter: url() 引入该滤镜，这里为了效果更好，我直接在 上引入了该滤镜：

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

我们的字体就被 <feturbulence></feturbulence> 滤镜 赋予了一种流体的感觉：

这个效果可以说和烟雾效果基本没什么关系，不过只需要再添加一个模糊滤镜，神奇的事情就发生了：

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}

整个效果就瞬间烟雾化了很多：

好，给它添加上循环的动画效果，简单的借助 JavaScript 处理一下：

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;

function freqAnimation() {
    frames += .2

    bfx = 0.03;
    bfy = 0.03;

    bfx += 0.005 * Math.cos(frames * rad);
    bfy += 0.005 * Math.sin(frames * rad);

    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);

    window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

看看效果：

上述完整代码，你可以猛击这里：CodePen CSS + SVG Text Smoke Effect

https://codepen.io/Chokcoco/pen/wvrrwVM

当然，上述效果可以通过：

• 控制 <feturbulence></feturbulence> 的 baseFrequency 属性调节

• 控制 <feturbulence></feturbulence> 的 numOctaves 属性调节

• 控制 <fedisplacementmap></fedisplacementmap> 的 scale 属性调节

将 <feturbulence></feturbulence> 的 numOctaves

물론 그게 사실이지만 CSS에서는 필터 외에도 🎜흐림🎜 효과를 시뮬레이션하기 위해 다른 유형의 수단을 사용할 수도 있습니다. 🎜

🎜연기 애니메이션을 구현하는 순수 CSS🎜

🎜먼저 이 효과를 살펴보겠습니다. 🎜🎜🎜🎜다음과 같은 문자가 있다고 가정해 보겠습니다. 🎜rrreee🎜 텍스트만 전달합니다. -shadow + opacity는 연기 효과를 시뮬레이션할 수 있습니다: 🎜rrreee🎜효과를 살펴보세요: 🎜🎜🎜🎜위 내용을 바탕으로 변위, 회전, 크기 조정 및 약간의 변형을 추가할 수 있습니다. 코드를 작성하고 일부 transform 변환을 추가합니다: 🎜rrreee🎜 다음 효과를 얻으려면: 🎜🎜🎜🎜변환을 겹쳐보니 단어 하나가 날아가서 연기로 변하는 느낌이에요. . 이를 바탕으로 위에서 언급한 완전한 연기 효과를 얻으려면 여러 단어를 함께 모으고 animation-delay를 사용하여 각 단어를 순차적으로 제어하여 애니메이션 효과를 트리거하기만 하면 됩니다. 🎜🎜의사 코드는 다음과 같습니다: 🎜rrreeerrreee🎜 단어가 바람에 날려 연기로 변하는 효과를 얻을 수 있습니다: 🎜🎜🎜

🎜위 효과는 제가 직접 만든 것이 아닙니다. 이 작성자가 처음 본 것입니다 - CodePen 데모 - 연기가 자욱한 텍스트 작성자: Bennett Feely🎜🎜https://codepen.io/bennettfeely/pen/lgybC🎜

🎜SGV 연기 필터를 사용하여 연기 효과 얻기 🎜

🎜위의 연기 속의 연기 애니메이션은 여전히 ​​상대적으로 거칠습니다. 주로 입자가 약간 부족하기 때문입니까? 연기 텍스처 중 일부가 누락되었습니다. 🎜🎜보다 세련된 연기 효과를 얻으려면 SVG의 <feturbulence></feturbulence> 필터를 사용해야 합니다. 🎜🎜다음으로 filter:blur() 필터를 사용하면 더욱 사실적인 연기 효과를 얻을 수 있습니다. 🎜🎜간단한 예로 다음과 같은 몇 가지 단어가 있다고 가정해 보겠습니다. 🎜rrreee🎜간단한 CSS: 🎜rrreee🎜다음과 같이 그라데이션 색상이 포함된 몇 가지 단어를 가져옵니다. 🎜🎜🎜🎜저희는 <feturbulence></feturbulence> 필터를 사용합니다. 간단한 처리 살펴보기: 🎜rrreee🎜CSS는 filter: url()을 사용하여 이 필터를 도입했습니다. 더 나은 효과를 위해 이 필터를 필터에 직접 도입했습니다. : 🎜rrreee🎜우리 글꼴은 <feturbulence></feturbulence> 필터를 통해 부드러운 느낌을 줍니다: 🎜🎜🎜🎜 이 효과는 기본적으로 연기 효과와는 아무 관련이 없다고 할 수 있지만 블러 필터만 추가하면 됩니다 거울아, 마법같은 일이 일어났어: 🎜rrreee🎜전체 효과가 즉시 🎜smoked🎜 많이: 🎜🎜🎜🎜좋아요, 반복되는 애니메이션 효과를 추가하고 간단히 JavaScript를 사용하여 처리하세요. 🎜rrreee🎜효과를 보세요: 🎜🎜🎜

🎜위 전체 내용을 보려면 코드를 보려면 여기를 클릭하세요: CodePen CSS + SVG 텍스트 연기 효과🎜🎜https://codepen.io/Chokcoco/pen/wvrrwVM🎜

🎜물론 위의 효과는 다음을 통해 얻을 수 있습니다: 🎜

🎜🎜Control<feturbulence></feturbulence>의 baseFrequency 속성 조정🎜🎜🎜🎜Control<feturbulence> </feturbulence> numOctaves 속성 조정 🎜🎜🎜🎜은 <fedisplacementmap></fedisplacementmap>의 scale 속성 조정 🎜🎜🎜🎜을 제어합니다. code> ;의 numOctaves 속성이 30에서 70으로 변경되고, 텍스트의 윤곽선이 기본적으로 보이지 않으며, 텍스트가 완전히 원자화됩니다. 다음과 같이 호버 효과를 만들 수 있습니다. 🎜



위의 전체 코드를 보려면 여기를 클릭하세요: CodePen CSS + SVG Text Smoke Hover Effect

https://codepen.io/Chokcoco/pen/Jjrrojj

이런 방식으로 filter: blur() 配合 <feturbulence></feturbulence> 필터를 사용하면 매우 사실적인 연기 효과를 얻을 수 있습니다. 위의 데모를 기반으로 많은 흥미로운 효과를 탐색할 수도 있지만 이 기사에서는 자세히 다루지 않습니다.

드디어

자, 이 글은 여기까지입니다. 이 글이 여러분에게 도움이 되길 바랍니다 :)

(동영상 공유 학습: css 동영상 튜토리얼)

위 내용은 흐릿하고 거친 연기 효과는 순수한 CSS로도 얻을 수 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!