评论资讯 [ 总 428 则 ]
·悄然 - 2024-12-24 19:55
·小希 - 2024-12-24 19:51
·飞飞 - 2024-12-24 19:45
·悄然 - 2024-12-24 19:41
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
·小希 - 2024-12-24 19:51
·飞飞 - 2024-12-24 19:45
·悄然 - 2024-12-24 19:41
·了了 - 2024-12-18 21:32
·悄然 - 2024-12-17 15:19
·悄然 - 2024-12-15 15:12
·悄然 - 2024-12-9 12:32
·飞飞 - 2024-12-9 12:31
·小希 - 2024-12-7 11:50
友情链接
网站统计
烟消云散:CSS文本特效演示
CSS并非万能,不过模拟文本烟雾化还是可以的,虽然不会很逼真。实现思路是:利用text-shadow、opacity和transform转换的巧妙配合,通过文本阴影+旋转、扭曲、拉伸+透明令文本个体注意烟雾化而后消散。以下是效果和代码:
代码:
<style> #ma { margin: 20px auto; width: 600px; height: 200px; overflow: hidden; display: flex; justify-content: center; align-items: end; } .txtBox { font: bold 2.4em sans-serif; color: transparent; 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的赋值运算等,均可适当调整参数,以达到设计需求。
这个效果不宜用于长篇文本,一般而言仅适用于字数不太多的单行文本。
前一篇: 计算器演算动画
下一篇: JS打开本地文本文件
发表评论:
评论列表 [1条]
#1 | 知名不具 于 2024-1-19 21:21 发布: 好看,很迷幻。