CSS3文本闪烁效果
分类:实例代码
CSS3文本闪烁效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了文本的闪烁效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .box { animation: change 1s ease-in infinite; font-size: 36px; color: #f00; font-weight: bold; } @keyframes change { 0% { text-shadow: 0 0 4px #f00; } 50% { text-shadow: 0 0 40px #f00; } 100% { text-shadow: 0 0 4px #f00; } } </style> </head> <body> <a class="box">前端教程网</a> </body> </html>
代码非常的简单,更多内容可以参阅相关阅读。
相关阅读:
(1).animation参阅CSS3 animation一章节。
(2).@keyframes参阅CSS3 @keyframes一章节。
(3).text-shadow参阅CSS3 text-shadow一章节。
CSS3文本闪烁效果,这样的场景在实际项目中还是用的比较多的,关于CSS3文本闪烁效果就介绍到这了。