烟消云散：CSS文本烟雾化特效

马黑黑 · 发表于 2024-1-18 08:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-18 12:01 编辑

CSS并非万能，不过模拟文本烟雾化还是可以的，虽然不会很逼真。实现思路是：利用text-shadow、opacity和transform转换的巧妙配合，通过文本阴影+旋转、扭曲、拉伸+透明令文本个体注意烟雾化而后消散。以下是效果和代码：

代码：

<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>

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 秒）。

CSS的盒子背景色、文本颜色以及关键帧动画的相关数值、JS的赋值运算等，均可适当调整参数，以达到设计需求。

这个效果不宜用于长篇文本，一般而言仅适用于字数不太多的单行文本。