php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）

在网页中，通常设计师们为了凸显自己的产品主题，总会让文字或者加点特效，比如使文字不停的闪动，或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外，还有哪些方法可以实现这样的功能特效呢？对于略懂代码的朋友们来说，我们都知道css中文字体样式是有很多种的，例如倾斜、加粗等等。那么这里就给大家介绍一下，如何用css代码做出文字闪动效果，本篇有两种闪动方式可供大家参考。

一、css字体闪动(波浪闪动)具体示例代码如下：

纯css代码测试文字闪动效果

body{

background: #000;

}

h1.fb-glitch {

position: relative;

color: #abff79;

}

h1.fb-glitch:before {

left: -2px;

text-shadow: 2px 0 #0b391a;

animation: glitch-anim-2 3s infinite linear alternate-reverse;

}

h1.fb-glitch:before, h1.fb-glitch:after {

content: attr(data-text);

position: absolute;

top: 0;

left: 0;

width: 100%;

clip: rect(0, 0, 0, 0);

}

h1.fb-glitch:after {

left: 2px;

text-shadow: -1px 0 #1b5c16;

animation: glitch-anim-1 2s infinite linear alternate-reverse;

}

@keyframes glitch-anim-1 {

0% {

clip: rect(82px, 820px, 98px, 0); }

5.8823529412% {

clip: rect(17px, 820px, 4px, 0); }

11.7647058824% {

clip: rect(24px, 820px, 44px, 0); }

17.6470588235% {

clip: rect(24px, 820px, 111px, 0); }

23.5294117647% {

clip: rect(29px, 820px, 45px, 0); }

29.4117647059% {

clip: rect(114px, 820px, 115px, 0); }

35.2941176471% {

clip: rect(103px, 820px, 22px, 0); }

41.1764705882% {

clip: rect(49px, 820px, 32px, 0); }

47.0588235294% {

clip: rect(2px, 820px, 10px, 0); }

52.9411764706% {

clip: rect(80px, 820px, 44px, 0); }

58.8235294118% {

clip: rect(70px, 820px, 30px, 0); }

64.7058823529% {

clip: rect(27px, 820px, 79px, 0); }

70.5882352941% {

clip: rect(82px, 820px, 112px, 0); }

76.4705882353% {

clip: rect(27px, 820px, 2px, 0); }

82.3529411765% {

clip: rect(47px, 820px, 104px, 0); }

88.2352941176% {

clip: rect(53px, 820px, 102px, 0); }

94.1176470588% {

clip: rect(2px, 820px, 90px, 0); }

100% {

clip: rect(88px, 820px, 56px, 0); } }

@keyframes glitch-anim-2 {

0% {

clip: rect(88px, 820px, 68px, 0); }

5.8823529412% {

clip: rect(75px, 820px, 113px, 0); }

11.7647058824% {

clip: rect(80px, 820px, 40px, 0); }

17.6470588235% {

clip: rect(70px, 820px, 51px, 0); }

23.5294117647% {

clip: rect(47px, 820px, 78px, 0); }

29.4117647059% {

clip: rect(61px, 820px, 7px, 0); }

35.2941176471% {

clip: rect(94px, 820px, 1px, 0); }

41.1764705882% {

clip: rect(26px, 820px, 69px, 0); }

47.0588235294% {

clip: rect(91px, 820px, 62px, 0); }

52.9411764706% {

clip: rect(8px, 820px, 78px, 0); }

58.8235294118% {

clip: rect(17px, 820px, 97px, 0); }

64.7058823529% {

clip: rect(66px, 820px, 48px, 0); }

70.5882352941% {

clip: rect(66px, 820px, 85px, 0); }

76.4705882353% {

clip: rect(46px, 820px, 12px, 0); }

82.3529411765% {

clip: rect(69px, 820px, 68px, 0); }

88.2352941176% {

clip: rect(38px, 820px, 7px, 0); }

94.1176470588% {

clip: rect(83px, 820px, 32px, 0); }

100% {

clip: rect(110px, 820px, 95px, 0); } }

文字闪动效果

以上代码可直接复制在本地测试，测试效果如下截图：

二、css字体闪动(渐变闪动)具体示例代码如下：

css代码闪动效果测试

文字闪动测试：文字闪动效果

.main{

color: #666;margin-top: 50px;

}

@keyframes blink{

0%{opacity: 1;}

100%{opacity: 0;}

}

@-webkit-keyframes blink {

0% { opacity: 1; }

100% { opacity: 0; }

}

@-moz-keyframes blink {

0% { opacity: 1; }

100% { opacity: 0; }

}

@-ms-keyframes blink {

0% {opacity: 1; }

100% { opacity: 0;}

}

@-o-keyframes blink {

0% { opacity: 1; }

100% { opacity: 0; }

}

.blink{

color: #dd4814;

animation: blink 1s linear infinite;

-webkit-animation: blink 1s linear infinite;

-moz-animation: blink 1s linear infinite;

-ms-animation: blink 1s linear infinite;

-o-animation: blink 1s linear infinite;

}

以上代码可直接复制在本地测试，测试效果如下截图：

注：第二种渐变方法主要思路是通过改变透明度来实现文字的渐变闪烁

@keyframes blink{} 定义keyframe动画，命名为blink 。

@-webkit-keyframes blink 添加兼容性前缀

.blink{}定义blink类

-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 其它浏览器兼容性前缀

本篇文章介绍了两种文字闪动特效方法，希望对有需要的朋友有所帮助。

【相关内容推荐】