当前位置：首页 > CSS

css制作球体

2026-03-11 15:34:08CSS

使用CSS制作球体

通过CSS的border-radius和box-shadow属性可以轻松创建球体效果。以下是几种实现方法：

基础圆形

创建一个简单的圆形作为球体基础：

css制作球体

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff0000);
}

border-radius: 50%将元素变为正圆
radial-gradient添加立体光影效果

3D球体效果

通过多重阴影增强立体感：

css制作球体

.sphere {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff,
    #aaaaff 10%,
    #2a2aff 60%,
    #0000ff 90%
  );
  box-shadow: 
    inset 10px 10px 20px rgba(255,255,255,0.3),
    inset -10px -10px 20px rgba(0,0,0,0.3),
    0 0 30px rgba(0,0,255,0.5);
}

动画球体

添加CSS动画让球体更生动：

.bouncing-ball {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, #fff, #ff8800);
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

金属质感球体

使用复杂渐变创建金属效果：

.metal-sphere {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    hsl(0,0%,90%) 0%,
    hsl(0,0%,70%) 30%,
    hsl(0,0%,40%) 60%,
    hsl(0,0%,20%) 100%
  );
  box-shadow: 
    inset 5px 5px 10px rgba(255,255,255,0.8),
    inset -5px -5px 10px rgba(0,0,0,0.5),
    0 5px 15px rgba(0,0,0,0.3);
}