Html CSS中无限脉冲阴影的重建

我试图复制在这个网站上看到的脉冲效应（在中间向下滚动）

我已经把网站的CSS缩小到了他们在这篇文章中使用的两个div，但是无法让它工作

HTML

<div class="pulse">
<div class="status"> </div>
</div>

---

看起来像是纯CSS，但我可能错了。代码笔和站点代码之间有什么区别？

你没有在任何地方定义

pulse

动画（基本上什么都做）

你试着用这句话来称呼它：

-webkit-animation: pulse 2s infinite linear;

这是您的代码笔，带有定义的动画：

.hex:之前{
内容：“；
宽度：0；
身高：0；
边框底部：30px实心#6C6；
左边框：52px实心透明；
右边框：52px实心透明；
位置：绝对位置；
顶部：-30px；
}
海克斯先生{
边缘顶部：30px；
宽度：104px；
高度：60px；
背景色：#6C6；
位置：相对位置；
}
.海克斯：之后{
内容：“；
宽度：0；
位置：绝对位置；
底部：-30px；
边框顶部：30px实心#6C6；
左边框：52px实心透明；
右边框：52px实心透明；
}
.脉搏{
边界半径：50px；
高度：60px；
左：50%；
字母间距：0.05em；
线高：50px；
位置：绝对位置；
文本对齐：居中；
文本转换：大写；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：60px；
}
.脉搏：之前{
-webkit动画：脉冲2s无限线性；
背景：rgba（99,87,63,0.5）；
边界半径：50px；
内容：''；
身高：100%；
左：0；
不透明度：0；
位置：绝对位置；
排名：0；
变换：比例（1）；
宽度：100%；
}
.脉搏：之后{
-webkit动画：脉冲2s 1s无限线性；
背景：rgba（99,87,63,0.5）；
边界半径：50px；
内容：''；
身高：100%；
左：0；
不透明度：0；
位置：绝对位置；
排名：0；
宽度：100%；
}
.地位{
背景#63573f；
边界半径：100%100%；
盒影：0 4px 0px#eed4c3插图；
高度：15px；
左：50%；
位置：绝对位置；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：15px；
}
@-webkit关键帧脉冲{0%{变换：缩放（0.2）；不透明度：0；}33%{变换：缩放（0.6）；不透明度：1；}100%{变换：缩放（1）；不透明度：0；}

-webkit-animation: pulse 2s infinite linear;