当前位置：首页 > CSS

css 制作球体

2026-01-28 05:50:25CSS

使用 CSS 制作球体

使用 `border-radius` 创建圆形

通过将元素的 border-radius 设置为 50%，可以将一个正方形元素变成一个圆形。这是制作球体的基础。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff5722;
}

添加渐变和高光效果

为了让球体看起来更立体，可以添加径向渐变或线性渐变来模拟光照效果。

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

使用 `box-shadow` 增加阴影

通过 box-shadow 为球体添加阴影，可以增强立体感。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5722, #e64a19);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

使用伪元素添加高光

通过 ::before 或 ::after 伪元素，可以在球体上添加高光，使其看起来更逼真。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5722, #e64a19);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

.ball::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 15%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

添加动画效果

通过 CSS 动画，可以让球体滚动或弹跳，增强动态效果。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5722, #e64a19);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
}

使用 3D 变换

通过 transform 属性，可以模拟球体的 3D 旋转效果。

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5722, #e64a19);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  animation: rotate 5s infinite linear;
}

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

css 制作球体