Html
    Css
    Js


.text-effect {
	background:#2c2c54;
	color:#fff;
	font-family:'Monoton',cursive;
	font-size:100px;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	margin:0 auto;
	display:block;
	position:relative;
}
.text-effect span {
	animation:animate linear 2000ms infinite;
}
.text-effect span:nth-child(1n) {
	animation-delay:0s;
}
.text-effect span:nth-child(2n) {
	animation-delay:100ms;
}
.text-effect span:nth-child(3n) {
	animation-delay:200ms;
}
.text-effect span:nth-child(4n) {
	animation-delay:300ms;
}
.text-effect span:nth-child(5n) {
	animation-delay:400ms;
}
.text-effect span:nth-child(6n) {
	animation-delay:500ms;
}
.text-effect span:nth-child(7n) {
	animation-delay:600ms;
}
.text-effect span:nth-child(8n) {
	animation-delay:700ms;
}
.text-effect span:nth-child(9n) {
	animation-delay:800ms;
}
.text-effect span:nth-child(10n) {
	animation-delay:900ms;
}
@keyframes animate {
	0% {
	opacity:0.3;
}
100% {
	opacity:1;
	text-shadow:0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
}
}@media only screen and (max-width:990px) {
	.text-effect {
	font-size:65px;
}
}@media only screen and (max-width:767px) {
	.text-effect {
	font-size:50px;
}
}@media only screen and (max-width:479px) {
	.text-effect {
	font-size:36px;
}
}@media only screen and (max-width:359px) {
	.text-effect {
	font-size:27px;
}
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
?立即下载

CSS3荧光灯文字闪烁动画

更新时间:2019-09-11 09:06:42

0