请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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的赋值运算等,均可适当调整参数,以达到设计需求。
这个效果不宜用于长篇文本,一般而言仅适用于字数不太多的单行文本。
|