烟消云散：CSS文本烟雾化特效
本帖最后由 马黑黑 于 2024-1-18 12:01 编辑 <br /><br /><style>.pa p { margin: 10px 0; font-size: 20px; }
.pa pre { padding: 10px; background: #eee; color: navy; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
#ma {
margin: 20px auto;
width: 600px;
height: 200px;
font: bold 3em sans-serif;
color: transparent;
border: 1px solid gray;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
}
.txtBox {
text-shadow: 0 0 0 rgba(0,0,0,1);
animation: gone var(--du) var(--de) infinite;
}
@keyframes gone {
60% {
text-shadow: 0 0 40px rgba(0,0,0,.6);
opacity: .5;
}
100% {
text-shadow: 0 0 20px rgba(0,0,0,.3);
transform: translate(-20px,-60px) rotate(-180deg) skew(20deg) scale(1.8);
opacity: 0;
}
}
</style>
<div class="pa">
<p>CSS并非万能，不过模拟文本烟雾化还是可以的，虽然不会很逼真。实现思路是：利用text-shadow、opacity和transform转换的巧妙配合，通过文本阴影+旋转、扭曲、拉伸+透明令文本个体注意烟雾化而后消散。以下是效果和代码：</p>
<div id="ma"></div>
<p>代码：</p>
<pre>
<style>
#ma {
margin: 20px auto;
width: 600px;
height: 200px;
font: bold 2.4em sans-serif;
color: transparent;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
}
.txtBox {
text-shadow: 0 0 0 rgba(0,0,0,1);
animation: gone var(--du) var(--de) infinite;
}
@keyframes gone {
40% {
text-shadow: 0 0 0 rgba(0,0,0,.6);
opacity: .5;
}
100% {
text-shadow: 0 0 0 rgba(0,0,0,.3);
transform: translate(-20px,-60px) rotate(-180deg) skew(20deg) scale(1.8);
opacity: 0;
}
}
</style>
<div id="ma"></div>
<script>
let strAr = '烟消云散一杯谁共歌欢'.split('');
strAr.forEach((text,key) => {
let span = document.createElement('span');
span.className = 'txtBox';
span.textContent = text;
span.style.cssText += `
--du: ${strAr.length * .8 + 1}s;
--de: ${key * .8}s;
`;
ma.appendChild(span);
});
</script>
</pre>
<p>css部分：一个父元素盒子样式 #ma，用 flex 布局是为了便于控制文本位置，overflow 属性则约束文本动画仅限呈现在盒子内；.txtBox 类元素样式用于文本，每一个文本个体均使用此类名，动画使用了两个CSS变量，--du 是动画时长，--de 是动画延时，将在JS中给出赋值；关键帧动画 gone 针对文本阴影、不透明度和transform做描述，其中，translate 参数用于设计烟雾的走向，本例是向左、向上。HTML部分：就一个父元素，其内的文本在JS中添加。JS部分：给文本容器 ma 添加文本，文本个体分别装入span，再将 span 标签追加给 ma 容器；span 的CSS样式指定类名即 className 为 txtBox，然后给 --du 和 --de 两个变量赋值，赋值算法的系数不一定这样，可根据文本的长短而定，但乘以几两个变量应保持一致，然后再给 --du 变量总值适当加大一点（比如本例，乘以 0.8 之后再加上 1 秒）。</p>
<p>CSS的盒子背景色、文本颜色以及关键帧动画的相关数值、JS的赋值运算等，均可适当调整参数，以达到设计需求。</p>
<p>这个效果不宜用于长篇文本，一般而言仅适用于字数不太多的单行文本。</p>
</div>
<script>
(function() {
let strAr = '烟消云散一杯谁共歌欢'.split('');
strAr.forEach((text,key) => {
let span = document.createElement('span');
span.className = 'txtBox';
span.textContent = text;
span.style.cssText += `
--du: ${strAr.length * .8 + 1}s;
--de: ${key * .8}s;
`;
ma.appendChild(span);
});
})();
</script>
本帖最后由 亚伦影音工作室 于 2024-1-18 09:56 编辑
这个效果太好了！有时间学习一下！能不能改变一下，先出一行字，再一个一个散去！
真是玩出花来了{:5_106:} 哇，这个真的像云烟一样地散去了呢，太美了{:4_199:} let span = document.createElement('h2'); 这里的h2是做什么用的？ 神奇！欣赏学习了！{:4_180:} 红影 发表于 2024-1-18 11:04
let span = document.createElement('h2'); 这里的h2是做什么用的？
原来是用了 h2 标签，忘了改过来，不过没关系的，span 和 h2 都是合法标签 亚伦影音工作室 发表于 2024-1-18 09:53
这个效果太好了！有时间学习一下！能不能改变一下，先出一行字，再一个一个散去！
开始是就是处一行字的，然后重复时就一个一个子出来了。如果总是先出一行字，需要JS来控制关键帧动画，编程开销略大一点 红影 发表于 2024-1-18 10:58
哇，这个真的像云烟一样地散去了呢，太美了
其实不够逼真。要弄成很逼真的样子，可能画布才行 起个网名好难 发表于 2024-1-18 10:12
真是玩出花来了
感谢支持 马黑黑 发表于 2024-1-18 12:01
原来是用了 h2 标签，忘了改过来，不过没关系的，span 和 h2 都是合法标签
主要对js不熟悉，看到不懂的就问了一下。嗯嗯，现在知道了{:4_204:} 马黑黑 发表于 2024-1-18 12:03
其实不够逼真。要弄成很逼真的样子，可能画布才行
现在这个已经很像了呢，特别漂亮{:4_199:} 红影 发表于 2024-1-18 15:25
现在这个已经很像了呢，特别漂亮
离逼真差太远 红影 发表于 2024-1-18 15:24
主要对js不熟悉，看到不懂的就问了一下。嗯嗯，现在知道了
我发帖的时候其实也很郁闷的，我都不记得将 span 改为了H2，字体大小怎么改都不是预期的，原来是这个h2闹得鬼：Discuz! 论坛程序对h系列可能有 !important 设定。 马黑黑 发表于 2024-1-18 18:56
离逼真差太远
我现在换家里的电脑，看着也很漂亮啊{:4_187:} 马黑黑 发表于 2024-1-18 18:59
我发帖的时候其实也很郁闷的，我都不记得将 span 改为了H2，字体大小怎么改都不是预期的，原来是这个h2闹 ...
对论坛程序不清楚，可能是这原因吧{:4_173:} 红影 发表于 2024-1-18 20:30
对论坛程序不清楚，可能是这原因吧
论坛程序机制复杂，它的CSS环境用不标准的做法设置 红影 发表于 2024-1-18 20:29
我现在换家里的电脑，看着也很漂亮啊
将就看看可以的 马黑黑 发表于 2024-1-18 20:45
论坛程序机制复杂，它的CSS环境用不标准的做法设置
而且可能还不是最新的东西。 马黑黑 发表于 2024-1-18 20:45
将就看看可以的
我觉得这个挺好看的，黑黑的要求太高了{:4_187:}