[分享]css光点动态效果

CSS光点动态效果是一种非常酷炫的视觉效果，可以让网页看起来更加生动。在CSS中，我们可以使用伪元素:before和:after来创建这种效果。下面是一段CSS代码，你可以尝试复制这段代码并粘贴到你的...

CSS光点动态效果是一种非常酷炫的视觉效果，可以让网页看起来更加生动。在CSS中，我们可以使用伪元素:before和:after来创建这种效果。下面是一段CSS代码，你可以尝试复制这段代码并粘贴到你的CSS文件中。

.box {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.box:before {
  content: ';
  position: absolute;
  top: -50px;
  left: -50px;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 50px #fff;
  animation: anim 2s infinite;
}

.box:after {
  content: ';
  position: absolute;
  top: -25px;
  left: -25px;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 50px #fff;
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
} 

在上面的代码中，我们首先创建了一个.box元素，并设置其position为relative，这是为了让伪元素:before和:after相对于.box元素进行定位。然后我们使用伪元素:before和:after分别创建两个大小不同的圆形元素，并设置它们的颜色、border-radius、box-shadow等样式。最后，我们使用animation属性为这两个元素添加了一个缩放和透明度变化的动画效果。

如果你想将这个效果应用到你的网页中，只需要将.box元素替换成你想要应用效果的元素，并调整圆形元素的位置、大小、颜色等样式即可。尝试一下吧！