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;
}
}