CSS文字条纹阴影动画

最新推荐文章于 2022-08-02 10:55:23 发布

whqet

最新推荐文章于 2022-08-02 10:55:23 发布

阅读量4.4k

点赞数 2

分类专栏： html5 less&sass css3 CSS3演武场文章标签： text shadow CSS3 前端开发伪类动画 less

本文链接：https://blog.csdn.net/whqet/article/details/18946017

版权

本文介绍了一个使用CSS3实现的文字条纹阴影动画效果。通过CodePen的示例，展示了如何创建这种视觉效果，并提供了HTML和CSS代码。读者可以在CodePen上直接编辑和体验，或保存此效果作为资源。

摘要由CSDN通过智能技术生成

See the Pen shadow text by haiqing wang (@whqet) onCodePen.

今天给大家推荐个动画条纹阴影效果，效果如下图所示。

好的，让我们开工吧，首先是so easy的html。

<!--
  data-text属性用来指定阴影内容
-->
<span class="shadow" data-text="Hello">Hello</span>

来看看关键的CSS怎么写，写东西之前弄好注释，养成好习惯。

/*
with less hat & prefix free
only for webkit
*/
/*导入字体*/

关注

专栏目录