效果一
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0b76fe1b2ef49715873e425456dc2c3e.gif#pic_center)
<div class="neon">The neon lights</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
@import url(https://fonts.googleapis.com/css?family=Pacifico);
.neon {
color: #cce7f8;
font-size: 42px;
font-family: 'Pacifico', cursive;
text-transform: uppercase;
animation: shining 0.1s alternate infinite;
user-select: none;
}
@keyframes shining {
from {
text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
0 0 54px rgba(15, 115, 223, 0.9);
}
to {
text-shadow: 0 0 6px rgba(182, 211, 207, 1),
0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
0 0 60px rgba(15, 115, 223, 1);
}
}