CSS世界之文字描边动画
CSS世界之文字描边动画
效果展示
实现思路
这个动画的核心就是 svg 描边的使用
当动画播放时,文本会从虚线描边变为实线描边,并且填充颜色逐渐显示,并带有投影阴影效果
在动画开始时(0%),描边样式为100%长度的虚线,填充颜色为透明
在动画进行到(95%),描边样式变为实线,即虚线消失,填充颜色仍为透明
在动画完成时(100%),描边样式为实线,并应用了一个投影效果,使得文本出现了投影阴影
实现代码
1 | <svg class="text-stroke" viewBox="0 0 500 150" width="100%" height="100%"> |
1 | .text-stroke { |
-
感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 View Room
评论