html简单的文字自动出现效果,20个强大的CSS3文字效果展示

20个强大的CSS3文字效果展示

8月 19, 2015

评论 (5)

Sponsor

今天为大家分享20个强大的CSS3文字效果，这些文字效果都不是用PS或是AI等设计软件制作出来，全部用代码实现，只有你想不到，没有做不到！来一起看看这些优秀的CSS3文字案例，可以作为灵感参考，也可点进去学习这些代码的实现方法。

注：如果用RSS阅读的用户，请返回设计达人网查看原文才能看到效果哦！

多款CSS文字HOVER案例展示

这些hover效果很漂亮，有的也挺有实用性的，请向下滑动你的鼠标中键，查看更多效果。

漂亮的CSS下划线效果

注意字线g, y, p，下划线会自动裁断，很神奇。

Loading加载文字效果

波浪式的加载效果

转动效果

See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.

文字飘入动画

像叶子飘入的效果，文字还带有漂亮发光特效。

See the Pen Magnetype by Bennett Feely (@bennettfeely) on CodePen.

文字弯弯曲曲变动效果

采用可爱的手写文字，加上弯曲的动画，使画面显得更加生动有趣

404错误页面效果

希望你没看眼花吧……

蒙版文字动画

TEXT SHADOW的使用

css实现文字条纹阴影

利用mask-image来实现，可以点进去研究。

文字替换效果

这个可用于登陆信息提示，用户登陆后切换文字。

像翻页的文字特效

See the Pen Opening type by Diego Pardo (@diegopardo) on CodePen.

文字倾斜特效

3D HOVER文字特效

使用Web font制作的文字样式

CSS实现的3D文字效果

CSS文字遮罩效果

这个文字遮罩效果感觉挺实用的，使用background-clip实现。

CSS mask-image使用案例

CSS实现文字斜阴影效果

跳动的文字特效

See the Pen Jelly letters by Mauricio Allende (@mallendeo) on CodePen.

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

刘杰 -

2016 年 11 月 04 日 下午 4:59

这代码怎么下载啊？？？？？？？

将往事留在风中 -

2015 年 11 月 17 日 上午 11:18

效果不错

将往事留在风中 -

2015 年 11 月 17 日 上午 11:17

效果很棒！

Btlmd -

2015 年 09 月 03 日 下午 4:20

这个是CodePen oEmbed吗，这个插件该怎么用啊？

skyler -

2015 年 08 月 20 日 下午 7:25

正需要，感谢分享。大牛们是思维果然很灵动·~~

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站