css3 文字闪烁效果_html实现文字闪烁代码的多种形式

发布时间:2018-09-24 07:34:17编辑:丝画阁阅读(1137)

文字闪烁效果一:

通过改变透明度来实现文字的渐变闪烁,效果如下:

文字带渐变效果的闪烁:闪烁效果

代码:

div class="main">
	文字闪烁:span class="blink">闪烁效果span> div> style type="text/css"> .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;
} style>


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

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

这样的效果:

文字不渐变闪烁:闪烁效果


文字闪烁效果二:

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

闪烁效果

代码如下:

	

div class="box">闪烁效果div>

style> .box{ font-size: 20px; 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>


文字闪烁效果三:

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

闪烁效果

代码如下:

span class="box">闪烁效果span> style> .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;
		}
	} style>




关键字