Html 切换框阴影开关？

这是一个现场版本

因此，正如您在门户上看到的，它周围有一个发光体，即

框阴影我想让它打开和关闭，让它感觉更真实，我添加了
过渡：框阴影轻松进出但它只在页面加载后的开始阶段执行，然后一直保持发光状态

这是相关代码。（portal_links表示门户左侧，rechts表示右侧，荷兰语）

HTML:

使用动画而不是过渡

关键帧：

动画：


.test{
背景：红色；
边界半径：50%；
宽度：100px；
高度：200px；
动画：测试3s线性无限；}
@关键帧测试{
25% { 
长方体阴影：0.55px rgba（0,0,0,0.9）；}
75% {
长方体阴影：0透明；}
}
使用动画而不是过渡

关键帧：

动画：


.test{
背景：红色；
边界半径：50%；
宽度：100px；
高度：200px；
动画：测试3s线性无限；}
@关键帧测试{
25% { 
长方体阴影：0.55px rgba（0,0,0,0.9）；}
75% {
长方体阴影：0透明；}
}
您可以在
框阴影上创建一个
动画
，如下所示


/*portal-general*/
波塔尔先生{
位置：绝对位置；
宽度：100px；
高度：200px；
边界半径：50px/100px；
底部：60px；
}
/*左门*/
.Portal_链接{
背景：径向梯度（中心椭圆，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过渡：盒影缓进缓出；
过渡延迟：1s；
过渡时间：1s；
盒影：055px#57B6FF；
不透明度：0.75；
左：50px；
动画：mvv 2s无限；
}
@关键帧mvv{
0%{
盒影：055px#57B6FF；
}
50%{
盒影：0px#57B6FF；
}
}
.portaal_rechts{
背景：径向梯度（中心椭圆，rgba（243197189,1）0%，rgba（232108,87,1）50%，rgba（234,40,3,1）51%，rgba（255102,0,1）75%，rgba（199,34,0,1）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
盒影：055px#FF6600；
不透明度：0.55；
左：750px；
动画：mv2s无限；
}
@关键帧mv{
0%{
盒影：055px#FF6600；
}
50%{
盒影：0px#FF6600；
}
}
您可以创建一个
动画
，如下面的
框阴影


/*portal-general*/
波塔尔先生{
位置：绝对位置；
宽度：100px；
高度：200px；
边界半径：50px/100px；
底部：60px；
}
/*左门*/
.Portal_链接{
背景：径向梯度（中心椭圆，#1e5799 0%，#2989d8 50%，#207cca 51%，#7db9e8 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过渡：盒影缓进缓出；
过渡延迟：1s；
过渡时间：1s；
盒影：055px#57B6FF；
不透明度：0.75；
左：50px；
动画：mvv 2s无限；
}
@关键帧mvv{
0%{
盒影：055px#57B6FF；
}
50%{
盒影：0px#57B6FF；
}
}
.portaal_rechts{
背景：径向梯度（中心椭圆，rgba（243197189,1）0%，rgba（232108,87,1）50%，rgba（234,40,3,1）51%，rgba（255102,0,1）75%，rgba（199,34,0,1）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
盒影：055px#FF6600；
不透明度：0.55；
左：750px；
动画：mv2s无限；
}
@关键帧mv{
0%{
盒影：055px#FF6600；
}
50%{
盒影：0px#FF6600；
}
}

使用动画而不是过渡。使用动画而不是过渡。是的，我也发现了这一点，并修复了它；不过无论如何还是要谢谢你：）是的，我刚刚也弄明白了，并且把它修好了；不过还是要谢谢你：）
<div class="portaal portaal_links"></div>
<div class="portaal portaal_rechts"></div>

/*portaal general*/
.portaal {
    position: absolute;
    width: 100px;
    height: 200px;
    border-radius: 50px / 100px;
    bottom: 315px;
}



/*portaal left*/
.portaal_links {
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    transition: box-shadow ease-in-out;
    transition-delay: 1s;
    transition-duration: 1s;
    box-shadow: 0 0 55px #57B6FF;
    opacity: 0.75;
    left: 50px;
}


.portaal_rechts {
    background: radial-gradient(ellipse at center, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    box-shadow: 0 0 55px #FF6600;
    opacity: 0.55;
    left: 750px;
}