Html
    Css
    Js

    
                        
body {
	margin:0;
	padding:0;
	background:#000;
}
.container {
	width:100%;
	height:55vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#000;
}
span {
	font-family:fira code;
	font-size:10em;
	filter:blur(2px);
	color:#fff;
	animation:animate 2.5s linear infinite;
}
span:nth-child(1) {
	animation-delay:0s;
}
span:nth-child(2) {
	animation-delay:0.25s;
}
span:nth-child(3) {
	animation-delay:0.5s;
}
span:nth-child(4) {
	animation-delay:0.75s;
}
span:nth-child(5) {
	animation-delay:1s;
}
span:nth-child(6) {
	animation-delay:1.25s;
}
span:nth-child(7) {
	animation-delay:1.5s;
}
span:nth-child(8) {
	animation-delay:1.75s;
}
span:nth-child(9) {
	animation-delay:2s;
}
@keyframes animate {
	0%,100% {
	filter:blur(2px);
	color:#fff;
	text-shadow:0 0 10px #1e90ff,0 0 20px #1e90ff,0 0 30px #1e90ff,0 0 40px #1e90ff,0 0 100px #1e90ff,0 0 200px #1e90ff,0 0 300px #1e90ff,0 0 400px #1e90ff;
}
5%,95% {
	filter:blur(0px);
	color:#666;
	text-shadow:none;
}
}

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

超炫酷文字特效

更新时间:2020-05-19 00:12:53

我将会继续更新超炫酷文字特效系列,敬请期待!

0