css3怎么实现文字闪烁效果

前端 思享 208浏览
摘要:
如果不需要渐变闪烁效果,我们可以在关键帧动画中定义50%和50.1%的不透明度值。

通过改变透明度来实现文字的渐变闪烁

效果图:

css3怎么实现文字闪烁效果

如果不需要渐变闪烁效果,我们可以在keyframe动画中定义50%,50.1%的opacity的值。如下:

css3怎么实现文字闪烁效果

    @-webkit-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }

利用背景图片或者背景渐变,实现文字颜色的闪烁效果

效果图:

css3怎么实现文字闪烁效果

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
        .blink{ 
    	display: inline-block;
    	font-size: 46px;
    	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;
		}
	}
    </style>  
    </head>  
    <body>  
        <div class="blink">星星之火可以燎原</div>
    </body>  
</html>  

通过设置text-shadow的值,来实现文字阴影闪烁的效果

效果图:

css3怎么实现文字闪烁效果

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
        .blink{ 
    	font-size: 46px; 
    	color:#4cc134; 
    	margin: 10px;
    	animation: changeshadow 1s  ease-in  infinite ;
    	/* 其它浏览器兼容性前缀 */
	    -webkit-animation: changeshadow 1s linear infinite;
	    -moz-animation: changeshadow 1s linear infinite;
	    -ms-animation: changeshadow 1s linear infinite;
	    -o-animation: changeshadow 1s linear infinite;
    }  
    @keyframes changeshadow {  
        0%{ text-shadow: 0 0 4px #4cc134}  
        50%{ text-shadow: 0 0 40px #4cc134}  
        100%{ text-shadow: 0 0 4px #4cc134}  
    }
    /* 添加兼容性前缀 */
	@-webkit-keyframes changeshadow {
	  0%{ text-shadow: 0 0 4px #4cc134}  
          50%{ text-shadow: 0 0 40px #4cc134}  
          100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-moz-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-ms-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
	@-o-keyframes changeshadow {
	    0%{ text-shadow: 0 0 4px #4cc134}  
            50%{ text-shadow: 0 0 40px #4cc134}  
            100%{ text-shadow: 0 0 4px #4cc134}  
	}
    </style>  
    </head>  
    <body>  
        <div class="blink">星星之火可以燎原</div>
    </body>  
</html>  

推荐阅读

右侧固定宽度,左侧自适应两栏布局

最近修改了一个主题。原始主题的左侧是侧边栏,右侧是内容体。在代码中,侧栏代码放在主要内容之前。我的习惯是主要内容在左边,主要内容在前面,侧边栏在右边。于是我在网上搜了一下,找到了两种实现方式。一般来说,一种方法是使用cal()。我用的是这个,第二个是......

纯css实现轮播和点击切换效果(无JS)

接下来,根据需要设置ul的长度。这里,首先制作三个切换窗口,因此ul的宽度被设置为容器宽度的300%,li是每次切换时显示的子元素,宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来,这样我们就可以通过修改ul的margin-left属性的......

什么是CSS层叠,优先级规则是什么

Css本质上是一个语句规则,就是在各种条件下,我们想要产生一个特定的效果。浏览器将根据我们编写的规则决定如何呈现页面。层叠是指CSS中的一系列规则,决定了如何解决冲突,是CSS语言的基础。重要的语句会作为优先级较高的来源,所以整体优先级是从高到低的!......