html - 如何使用 css 使文本闪烁和发光

Question

我有这个 css 但不能让我的文字发光和闪烁：

 @import
 url(//fonts.googleapis.com/cssfamily=Pacifico);
 body {
 min-height:100vh;
 padding-top:5rem;
 background:
 #112
 url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg)
 center no-repeat;
 background-size: cover;
 margin: 0;
 overflow:hidden;
 }

.lasvegas {
font-family: 'Pacifico', cursive;
font-size:80px;
border: none;
color: rgba(255,255,255,0.6);
text-align:
center;
text-shadow: 1px 5px 4px rgba(0,0,0,.3), 0 0 2px
rgba(255,255,255,1), 0 0 10px
rgba(255,255,255,1),  0 0 20px rgba(255,255,255,1), 0 0
30px rgba(255,255,255,1),  0 0 40px #ff00de,0 0 70px
#ff00de,  0 0 80px #ff00de, 0 0 100px #ff00de;
 }
 .lasvegas
 span {
animation: blink .3s infinite alternate;
}
.lasvegas
span.delay {
animation-duration:6s;
animation-delay: 2s
animation-direction: alternate
cubic-bezier(0.5, 0.2, 0.3,
1.0)
}

@keyframes blink {
0%  {
}

50% {
}

60% {
text-shadow:0 0
2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .
4); text-stroke: 2px rgba(255,255,255,0.05);
}

70% {
text-
shadow: 0 0 2px rgba(255,255,255,1), 0 0 10px.
rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0
30px rgba(255,255,255,1),  0 0 40px #ff00de, 0 0 70px
#ff00de, 0 0 80px #ff00de,  0 0 100px #ff00de;
}

80% {
text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px
rgba(255, 255, 255, .4);
text-stroke: 2px
rgba(255,255,255,0.05);
}

100% {
text-shadow: 0 0 2px
rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0
20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1),0
0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de, 0 0
100px #ff00de;
}

}

这是html：

 <div class="lasvegas"> Neon text 
f<span>ro</span>m<br> Las <span 
class="delay">V</span>egas </div>

它应该是粉红色的，在两个不同的地方以不同的间隔闪烁，就像一个发光的、闪烁的霓虹灯。它用于 wordpress 中的事件页面。我只是想知道我在这里错过了什么，因为它应该可以工作。所有的代码都是正确的。

标签： htmlcsscss-animations

Answer 1

 @import
 url(//fonts.googleapis.com/cssfamily=Pacifico);
 body {
 min-height:100vh;
 padding-top:5rem;
 background:
 #112
 url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg)
 center no-repeat;
 background-size: cover;
 margin: 0;
 overflow:hidden;
 }

.lasvegas {
font-family: 'Pacifico', cursive;
font-size:80px;
border: none;
color: rgba(255,255,255,0.6);
text-align:
center;
text-shadow: 1px 5px 4px rgba(0,0,0,.3), 0 0 2px
rgba(255,255,255,1), 0 0 10px
rgba(255,255,255,1),  0 0 20px rgba(255,255,255,1), 0 0
30px rgba(255,255,255,1),  0 0 40px #ff00de,0 0 70px
#ff00de,  0 0 80px #ff00de, 0 0 100px #ff00de;
 }
 .lasvegas
 span {
animation: blink .3s infinite alternate;
}
.lasvegas
span.delay {
animation-duration:6s;
animation-delay: 2s
animation-direction: alternate
cubic-bezier(0.5, 0.2, 0.3,
1.0)
}

@keyframes blink {
0%  {
}

50% {
}

60% {
text-shadow:0 0
2px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .
4); text-stroke: 2px rgba(255,255,255,0.05);
}

70% {
text-
shadow: 0 0 2px rgba(255,255,255,1), 0 0 10px.
rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0
30px rgba(255,255,255,1),  0 0 40px #ff00de, 0 0 70px
#ff00de, 0 0 80px #ff00de,  0 0 100px #ff00de;
}

80% {
text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10px
rgba(255, 255, 255, .4);
text-stroke: 2px
rgba(255,255,255,0.05);
}

100% {
text-shadow: 0 0 2px
rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0
20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1),0
0 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de, 0 0
100px #ff00de;
}

}

<div class="lasvegas"><span> Neon text 
from<br></span> <span class="delay">Las Vegas</span> </div>

我不知道你想看到什么，但它的行为就像你定义的那样：

fromROm 快速闪烁。来自维加斯的 V 字缓慢闪烁。

请更具体地回答您的问题。

编辑：现在换行后闪烁速度变慢..