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

Html 如何使用css使文本闪烁和发光,html,css,css-animations,Html,Css,Css Animations,我有这个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

我有这个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中的事件页面。我只是想知道我在这里错过了什么,因为它应该是有效的。所有代码都是正确的

@import
url(//fonts.googleapis.com/cssfamily=Pacifico);
身体{
最小高度:100vh;
垫面:5rem;
背景:
#112
url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg)
中心不重复;
背景尺寸:封面;
保证金:0;
溢出:隐藏;
}
拉斯维加斯先生{
字体系列:“Pacifico”,草书;
字号:80px;
边界:无;
颜色:rgba(255255,0.6);
文本对齐:
居中
文本阴影:1px 5px 4px rgba(0,0,0,3),0 0 2px
rgba(255255,1),0 10px
rgba(255255,1),0 0 20px rgba(255255,1),0 0
30像素rgba(255255255,1),0 0 40像素ff00de,0 0 70像素
#ff00de,0 0 80px#ff00de,0 0 100px#ff00de;
}
拉斯维加斯先生
跨度{
动画:闪烁。3s无限交替;
}
拉斯维加斯先生
延迟{
动画持续时间:6s;
动画延迟:2秒
动画方向:交替
立方贝塞尔(0.5,0.2,0.3,
1.0)
}
@关键帧闪烁{
0%  {
}
50% {
}
60% {
文本阴影:0
2个rgba(255,255,255,.1),0个10像素rgba(255,255,255。
4) 文字笔划:2倍rgba(255255,0.05);
}
70% {
正文-
阴影:0 0 2倍rgba(255255,1),0 0 10像素。
rgba(255255,1),0 0 20px rgba(255255,1),0 0
30像素rgba(255255255,1),0 0 40像素ff00de,0 0 70像素
#ff00de,0 0 80px#ff00de,0 0 100px#ff00de;
}
80% {
文本阴影:0 0 2px rgba(255,255,255,.1),0 0 10px
rgba(255,255,255,4);
文字笔划:2px
rgba(255255,0.05);
}
100% {
文本阴影:0 0 2px
rgba(255255,1),0 0 10px rgba(255255,1),0 0
20像素rgba(255255,1),0 0 30像素rgba(255255,1),0
0 40px#ff00de,0 70px#ff00de,0 80px#ff00de,0 0
100px#ff00de;
}
}
霓虹灯文本

来自拉斯维加斯
太好了。谢谢但是可以把单词分开一点。在jsfiddle.net中看起来很棒,页面结果如下:只需检查源代码。将文本本身与类“entry content”放在一个div中。也许可以检查一下你应用于这门课的风格。如果我的解决方案像预期的那样工作,请将其标记为正确答案,如果需要更多帮助,请询问新答案。