Html 如何将脉动动画添加到菜单按钮

我正在尝试向菜单按钮添加一个脉动动画，如下所示： 我试图复制这段视频中使用的确切代码，但由于某种原因，我无法让它工作

我知道这些图标在我的代码段中不起作用，但我没有找到添加它们的方法，但页面位于以下链接上：

.手指{ 背景：白色； 不透明度：0； 宽度：400px； 高度：400px； 边界半径：100%； 左边距：自动； 右边距：自动； 边缘顶部：300px； 位置：相对位置； } .菜单按钮{ 不透明度：0； z指数：-1； 动画：脉冲2s线性ininite； } .菜单按钮{ 宽度：250px； 高度：250px； 位置：绝对位置； 左：50%； 最高：50%； 利润率：-75px0-160px； 边界半径：50%； 背景：绿色； 背景大小：100%； 溢出：隐藏； 文字装饰：无； } 菜单：非：目标>a：第一种类型， 菜单：目标>a:类型的最后一个{ 不透明度：1； z指数：5； } @关键帧脉冲{ 0% { 长方体阴影：0 rgbafff，fff，ff，.7； } 40% { 框阴影：0 50px rgbafff，fff，ff，.7； } 80% { 框阴影：0 50px rgbafff，fff，ff，.7； } 100% { 长方体阴影：0 rgbafff，fff，ff，.7； } } 框阴影无效。它采用以下值。只有4个值和一种颜色

框阴影：[水平偏移][垂直偏移][模糊半径][可选扩散半径][颜色]

此外，rgba颜色不适用于十六进制代码，它只接受颜色范围为0-255的数字，用于每个红色/绿色/蓝色模式

这里是一个正确的css为您的关键帧

---

你的HTML也是无效的。ul只能让li作为直系子女。好吧，我把它简化为相关部分。这只是相关代码now@JD请接受答案。很乐意帮忙^^

@keyframes pulse{
    0%
    {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    }
    40%
    {
        box-shadow: 0 0 0 50px rgba(255, 255, 255, .7);
    }
    80%
    {
        box-shadow: 0 0 0 50px rgba(255, 255, 255, .7);
    }
    100%
    {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    }
}