在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特效呢?对于略懂代码的朋友们来说,我们都知道css中文字体样式是有很多种的,例如倾斜、加粗等等。那么这里就给大家介绍一下,如何用css代码做出文字闪动效果,本篇有两种闪动方式可供大家参考。
一、css字体闪动(波浪闪动)具体示例代码如下:
纯css代码测试文字闪动效果文字闪动效果
以上代码可直接复制在本地测试,测试效果如下截图:
二、css字体闪动(渐变闪动)具体示例代码如下:
css代码闪动效果测试
文字闪动测试:
文字闪动效果
以上代码可直接复制在本地测试,测试效果如下截图:
注:第二种渐变方法主要思路是通过改变透明度来实现文字的渐变闪烁
@keyframes blink{} 定义keyframe动画,命名为blink 。
@-webkit-keyframes blink 添加兼容性前缀
.blink{}定义blink类
-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 其它浏览器兼容性前缀
本篇文章介绍了两种文字闪动特效方法,希望对有需要的朋友有所帮助。
【相关内容推荐】
利用html实现文字闪烁的效果代码
炫酷文字跳动漂浮js特效代码
CSS3实现立体文字动态文字特效
一个网页标题title的闪动提示效果实现思路_javascript技巧
利用纯CSS实现动态的文字效果实例