画一个有光泽的立体的旋转的蓝色的球体 css

要在CSS中创建一个有光泽的立体旋转的蓝色球体，可以通过使用CSS3的一些特性，如`border-radius`来形成球体的效果，`transform`和`animation`来实现旋转动画，以及`box-shadow`和`background`来给球体添加光泽和颜色。下面是一个简单的实现示例：

/* 确保容器大小和视口大小一致 */
html, body {
  height: 100%;
  margin: 0;
}

/* 创建一个容器用于旋转球体 */
.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 100px auto;
  perspective: 600px; /* 设置3D透视 */
}

/* 定义球体样式 */
.sphere {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: blue; /* 设置球体颜色为蓝色 */
  animation: rotate 5s infinite linear; /* 设置旋转动画 */
}

/* 通过box-shadow增加光泽效果 */
.sphere:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5); /* 添加内阴影实现光泽 */
}

/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

HTML结构如下：

<div class="container">
  <div class="sphere"></div>
</div>

这段代码将创建一个位于页面中心的蓝色球体，它将不断旋转，并带有光泽效果。你可以通过调整`animation`的时长和`border-radius`的百分比来改变旋转速度和球体的圆润度。`box-shadow`中的`inset`关键字表示内阴影，`rgba`函数的最后一个参数控制阴影的透明度，这里设置为0.5以获得光泽效果。