SOURCE

console 命令行工具 X clear

                    
>
console
<h1>超炫酷文字特效</h1>
<br>
<div class="container" data-content="HEllO WORLD! 你好 世界">
    HEllO WORLD! 你好 世界
</div>
 

 <div class="container1">
		<span>w</span>
		<span>e</span>
		<span>l</span>
		<span>l</span>
		<span>c</span>
		<span>o</span>
		<span>m</span>
		<span>e</span>
		<span>!</span>
	</div>
body{
    background: #000;
}
.container {
		color:#fff;
		font-size:6em;
		letter-spacing:8px;
		font-family:fira code;
		font-weight:500;
		text-transform:uppercase;
		position:relative;
	}
	.container::before,.container::after {
		content:attr(data-content);
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
		width: 100%;
	}
	.container::before {
		color:#ff00c1;
		animation:tik-tok 0.5s infinite;
		animation-delay:0.1s;
	}
	.container::after {
		color:#3498db;
		animation:tik-tok 0.5s infinite;
	}
	@keyframes tik-tok {
		0% {
			left:-8px;
			top:-8px;
		}
		25% {
			left:8px;
			top:0px;
		}
		50% {
			left:-4px;
			top:8px;
		}
		75% {
			left:4px;
			top:-4px;
		}
		100% {
			left:0;
			top:-4px;
		}
	}


    .container1 {
			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;
			}
		}