当前位置：首页 > CSS

css 制作球体

2026-04-01 08:34:22CSS

使用 CSS 制作球体

方法一：使用 border-radius 和渐变

通过将元素的 border-radius 设置为 50% 可以创建一个圆形，再结合 CSS 渐变（如径向渐变）模拟球体的光影效果。

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

border-radius: 50% 将元素变为圆形。
radial-gradient 模拟光源从左上角照射的效果。
box-shadow 的 inset 属性增强内部阴影，突出立体感。

方法二：使用 box-shadow 和动画

通过 box-shadow 叠加多层阴影，配合动画实现动态球体效果。

.sphere {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #4fc3f7;
  box-shadow: 
    0 0 20px #fff,
    -10px -10px 20px rgba(255, 255, 255, 0.5),
    10px 10px 20px rgba(0, 0, 0, 0.3);
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 10px #fff; }
  to { box-shadow: 0 0 30px #fff; }
}

多层 box-shadow 增强球体的光晕效果。
animation 实现呼吸灯式的动态效果。

方法三：结合伪元素和 3D 变换

通过伪元素和 transform 属性模拟 3D 球体的高光部分。

.sphere {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #00b4db, #0083b0);
  position: relative;
}

.sphere::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(5px);
}