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

CSS（层叠样式表）主要用于网页布局、样式设计和美化，但它也可以用来创建简单的2D和3D图形，比如一个有光泽的立体的旋转球体。这通常涉及到使用CSS的变换（transform）和过渡（transition）属性来实现动画效果。下面是一个简单的示例代码，展示如何使用CSS创建一个旋转的光泽球体：

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.glossy-ball {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, #fff 60%, #ccc 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: rotate 5s linear infinite;
}

/* 增加光泽效果 */
.glossy-ball:after {
  content: '';
  position: absolute;
  top: 5%;
  left: 50%;
  width: 90%;
  height: 90%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  filter: blur(15px);
  transform: rotate(45deg);
}

<div class="glossy-ball"></div>

在这段代码中，`.glossy-ball` 类定义了球体的样式，包括大小、背景渐变、边框半径以及盒阴影（box-shadow）来增加立体感。`@keyframes` 定义了一个名为 `rotate` 的动画，使得球体沿Y轴旋转。`.glossy-ball:after` 伪元素用来在球体表面添加光泽效果，通过调整其位置、大小、背景和模糊度（filter: blur）来实现。

请注意，这段代码是为了演示目的，实际在不同的浏览器中表现可能会有所差异，特别是在3D效果和阴影方面。此外，为了最佳显示效果，可能需要针对不同设备和屏幕调整尺寸和其他样式参数。