순수한 CSS를 사용하여 흐릿하고 거친 연기 효과를 얻을 수도 있습니다. 이 기사에서는 순수 CSS를 사용하여 연기 효과를 더 잘 얻을 수 있는지 단계별로 살펴보겠습니다.
이렇게
연기 효과를 주의 깊게 살펴보세요. 두 가지 중요한 기능이 있습니다.
흐림 효과를 먼저 살펴보세요. 먼저 그것에 대해 생각해 보겠습니다. filter: Blur() . filter: blur() 。
当然没错，不过在 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> 滤镜
接下来会使用 filter: blur() 配合 <feturbulence> 滤镜，得到更为逼真的烟雾效果。
举个简单的例子，假设有这样几个字：
<div">SMOKE</div>
简单的 CSS：
div {
background: linear-gradient(#fff, #999, #ddd, #888);
background-clip: text;
}得到这样几个带渐变色字：
我们利用 <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> 上引入了该滤镜：
body {
filter: url('#filter');
}
div {
background: linear-gradient(#fff, #999, #ddd, #888);
background-clip: text;
}我们的字体就被 <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> 的 baseFrequency 属性调节
控制 <feturbulence> 的 numOctaves 属性调节
控制 <fedisplacementmap></fedisplacementmap> 的 scale 属性调节
将 <feturbulence> 的 numOctaves
🎜🎜다음과 같은 문자가 있다고 가정해 보겠습니다. 🎜rrreee🎜
텍스트만 전달합니다. -shadow + opacity는 연기 효과를 시뮬레이션할 수 있습니다: 🎜rrreee🎜효과를 살펴보세요: 🎜🎜
🎜🎜위 내용을 바탕으로 변위, 회전, 크기 조정 및 약간의 변형을 추가할 수 있습니다. 코드를 작성하고 일부 transform 변환을 추가합니다: 🎜rrreee🎜 다음 효과를 얻으려면: 🎜🎜
🎜🎜변환을 겹쳐보니 단어 하나가 날아가서 연기로 변하는 느낌이에요. . 이를 바탕으로 위에서 언급한 완전한 연기 효과를 얻으려면 여러 단어를 함께 모으고 animation-delay를 사용하여 각 단어를 순차적으로 제어하여 애니메이션 효과를 트리거하기만 하면 됩니다. 🎜🎜의사 코드는 다음과 같습니다: 🎜rrreeerrreee🎜 단어가 바람에 날려 연기로 변하는 효과를 얻을 수 있습니다: 🎜🎜
🎜🎜위 효과는 제가 직접 만든 것이 아닙니다. 이 작성자가 처음 본 것입니다 - CodePen 데모 - 연기가 자욱한 텍스트 작성자: Bennett Feely🎜🎜https://codepen.io/bennettfeely/pen/lgybC🎜
<feturbulence> 필터를 사용해야 합니다. 🎜🎜다음으로 filter:blur() 
🎜🎜저희는 <feturbulence> 필터를 사용합니다. 간단한 처리 살펴보기: 🎜rrreee🎜CSS는 filter: url()을 사용하여 이 필터를 도입했습니다. 더 나은 효과를 위해 이 필터를 <feturbulence> 필터를 통해 부드러운 느낌을 줍니다: 🎜🎜
🎜🎜 이 효과는 기본적으로 연기 효과와는 아무 관련이 없다고 할 수 있지만 블러 필터만 추가하면 됩니다 거울아, 마법같은 일이 일어났어: 🎜rrreee🎜전체 효과가 즉시 🎜smoked🎜 많이: 🎜🎜
🎜🎜좋아요, 반복되는 애니메이션 효과를 추가하고 간단히 JavaScript를 사용하여 처리하세요. 🎜rrreee🎜효과를 보세요: 🎜🎜🎜🎜위 전체 내용을 보려면 코드를 보려면 여기를 클릭하세요: CodePen CSS + SVG 텍스트 연기 효과🎜🎜https://codepen.io/Chokcoco/pen/wvrrwVM🎜🎜물론 위의 효과는 다음을 통해 얻을 수 있습니다: 🎜
<feturbulence>의 baseFrequency 속성 조정🎜🎜🎜🎜Control<feturbulence> numOctaves 속성 조정 🎜🎜🎜🎜은 <fedisplacementmap></fedisplacementmap>의 scale 속성 조정 🎜🎜🎜🎜을 제어합니다. code><feturbulence> ;의 numOctaves 속성이 30에서 70으로 변경되고, 텍스트의 윤곽선이 기본적으로 보이지 않으며, 텍스트가 완전히 원자화됩니다. 다음과 같이 호버 효과를 만들 수 있습니다. 🎜위의 전체 코드를 보려면 여기를 클릭하세요: CodePen CSS + SVG Text Smoke Hover Effect
https://codepen.io/Chokcoco/pen/Jjrrojj
이런 방식으로 filter: blur() 配合 <feturbulence> 필터를 사용하면 매우 사실적인 연기 효과를 얻을 수 있습니다. 위의 데모를 기반으로 많은 흥미로운 효과를 탐색할 수도 있지만 이 기사에서는 자세히 다루지 않습니다.
자, 이 글은 여기까지입니다. 이 글이 여러분에게 도움이 되길 바랍니다 :)
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 흐릿하고 거친 연기 효과는 순수한 CSS로도 얻을 수 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
