css制作球体

使用CSS制作球体

通过CSS的border-radius属性和渐变背景可以创建逼真的球体效果。以下是两种常见方法：

基础圆形实现

.sphere {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff0000);
  box-shadow: inset -20px -20px 60px rgba(0, 0, 0, 0.5);
}

关键属性：

• border-radius: 50%将元素变为正圆形
• radial-gradient创建中心亮边缘暗的渐变效果
• box-shadow添加内阴影增强立体感

3D球体进阶版

.sphere-3d {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 25% 25%,
    hsl(0, 100%, 90%),
    hsl(0, 100%, 70%),
    hsl(0, 100%, 50%),
    hsl(0, 100%, 30%)
  );
  transform: rotateX(15deg) rotateY(15deg);
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.2),
    inset 0 -15px 30px rgba(0,0,0,0.4);
}

增强技巧：

• 使用HSL颜色模式创建平滑色彩过渡
• 添加多重阴影增强深度
• 轻微旋转制造透视效果

动画球体（悬停旋转）

.animated-sphere {
  /* 基础样式同前 */
  transition: transform 0.5s ease;
}
.animated-sphere:hover {
  transform: rotateY(180deg);
}

注意事项：

• 高宽必须相等才能形成正圆
• 渐变中心点坐标影响光源方向
• 适当添加环境阴影增强立体感
• 考虑添加will-change: transform优化动画性能