CSS中的伪类是一种非常有用的工具，它可以让我们在不添加额外HTML节点的情况下实现一些效果。其中动画效果是我们最常使用的功能之一。今天我想分享一下如何使用CSS伪类after实现动画效果。

/* 在伪类after中定义动画效果 */
.box::after {
content: "";
position: absolute;
top: 50%;
left: -10px;
width: 12px;
height: 12px;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s infinite;
}
/* 定义动画，这里使用了CSS的@keyframes */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}

以上代码将在一个容器中生成一个小圆点，并给它添加了一个pulse的动画效果。这个动画会产生一个弱的光晕，让小圆点看起来有一个在闪烁的效果。这个动画非常简单，我们只需要定义一个@keyframes，然后在伪类after中使用animation属性就可以了。

我们可以通过调整@keyframes中的参数来改变动画效果，比如改变shadow的大小、颜色和透明度等等。这样一来我们就可以轻松地实现一些非常有趣的效果了，而且还能保持代码简洁易读。