css横排文字光影效果_css3模糊发光文字动画特效

使用方法：

1、head引入css文件

.text-effect{

color: #fff;

font-family: '微软雅黑';

font-size: 80px;

text-transform: uppercase;

text-align: center;

letter-spacing: 8px;

margin: 30px auto 0;

animation: 4s animate infinite linear;

}

@keyframes animate{

0%{ text-shadow: 0 0 0 white; }

40%{

color: rgba(255,255,255,0);

text-shadow: 0 0 30px white;

}

70%{

color: rgba(255,255,255,0.4);

text-shadow: 0 0 10px white;

}

90%{

color: rgba(255,255,255,0.6);

text-shadow: 0 0 30px white;

}

100%{ text-shadow: 0 0 40px rgba(255,255,255,0); }

}

@media only screen and (max-width: 990px){

.text-effect{ font-size: 80px; }

}

@media only screen and (max-width: 767px){

.text-effect{ font-size: 40px; }

}

@media only screen and (max-width: 479px){

.text-effect{ font-size: 30px; }

}

@media only screen and (max-width: 359px){

.text-effect{ font-size: 25px; }

}

2、body引入HTML代码

模糊文本