[分享]css光点效果旋转

现在网页设计越来越炫酷了，其中就包括各种特效。CSS光点效果旋转就是一种非常酷炫的效果。本文将介绍如何实现CSS光点效果旋转，代码使用pre标签如下：/ 设置页面背景颜色 / body { backg...

现在网页设计越来越炫酷了，其中就包括各种特效。CSS光点效果旋转就是一种非常酷炫的效果。本文将介绍如何实现CSS光点效果旋转，代码使用pre标签如下：

/* 设置页面背景颜色 */
body {
  background-color: #222222;
}

/* 创建一个div，并设置宽高 */
.div1 {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}

/* 设置div样式 */
.div1:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 25px;
  box-shadow: 0 0 60px #fff;
  animation: rotate 4s infinite linear;
}

/* 创建动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

接下来我来说明一下CSS光点效果旋转如何实现：

首先，我们需要设置页面背景颜色，这里设置为黑色。

然后，我们在页面中创建一个div，并设置宽高。我们需要使用伪元素:before来创建一个圆点。我们使用absolute定位方式将其居中，并添加10px的box-shadow使它看起来更美观一些。

接下来我们创建动画。我们定义一个名为rotate的keyframes，定义它可以从0度旋转到360度旋转。最后，我们将此动画与伪元素的圆点绑定，它将无限循环4秒，呈现出一个很棒的旋转效果。

以上就是如何实现CSS光点效果旋转的全部内容，它是一种非常炫酷的效果。希望你能够通过自己的思考和实践，创造出更多的CSS效果。