html文字闪烁没效果,html文字闪烁代码 css3文字闪烁效果

这篇文章主要为大家详细介绍了html文字闪烁代码 css3文字闪烁效果 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

文字闪烁效果一：

通过改变透明度来实现文字的渐变闪烁，代码如下：

文字闪烁：闪烁效果

.main{

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

}

/* 定义keyframe动画，命名为blink */

@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类*/

.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;

}

如果不需要渐变闪烁效果，我们可以在keyframe动画中定义50%，50.1%的opacity的值。如下：@-webkit-keyframes blink {

0% { opacity: 1; }

50% { opacity: 1; }

50.01% { opacity: 0; }

100% { opacity: 0; }

}

文字闪烁效果二：

通过设置text-shadow的值，来实现文字阴影闪烁的效果，代码如下：

闪烁效果

文字闪烁效果三：

利用背景图片或者背景渐变，实现文字颜色的闪烁效果，代码如下：闪烁效果

.box{

display: inline-block;

font-size: 20px;

margin: 10px;

background: linear-gradient(left, #f71605, #e0f513);

background: -webkit-linear-gradient(left, #f71605, #e0f513);

background: -o-linear-gradient(right, #f71605, #e0f513);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

animation:scratchy 0.253s linear forwards infinite;

/* 其它浏览器兼容性前缀 */

-webkit-animation:scratchy 0.253s linear forwards infinite;

-moz-animation: scratchy 0.253s linear forwards infinite;

-ms-animation: scratchy 0.253s linear forwards infinite;

-o-animation: scratchy 0.253s linear forwards infinite;

}

@keyframes  scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

/* 添加兼容性前缀 */

@-webkit-keyframes scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-moz-keyframes scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-ms-keyframes scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

@-o-keyframes scratchy {

0% {

background-position: 0 0;

}

25% {

background-position: 0 0;

}

26% {

background-position: 20px -20px;

}

50% {

background-position: 20px -20px;

}

51% {

background-position: 40px -40px;

}

75% {

background-position: 40px -40px;

}

76% {

background-position: 60px -60px;

}

99% {

background-position: 60px -60px;

}

100% {

background-position: 0 0;

}

}

小结:

以上361模板介绍的3中文字闪烁效果主要使用到css3的animation属性，大家可以直接复制使用，如果还有其他的闪烁效果，可以给361模板投稿哦！！

以上就是html文字闪烁代码 css3文字闪烁效果 的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持361模板网。

感谢打赏，我们会为大家提供更多优质资源！