css制作小球

使用 CSS 制作小球

通过 CSS 的 border-radius 属性和 width、height 设置可以轻松创建小球效果。

基本圆形小球：

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

添加阴影和渐变效果：

.ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff0000, #800000);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

动画效果（弹跳小球）：

.ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: blue;
  animation: bounce 1s infinite alternate;
}

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

3D 球体效果

使用多重阴影和渐变可以创建更逼真的 3D 球体。

.sphere {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #00aaff, #0066cc);
  box-shadow: 
    inset 0 0 20px #fff,
    inset 10px 0 30px rgba(255,255,255,0.5),
    inset -10px 0 30px rgba(0,0,255,0.5),
    inset 10px 0 100px rgba(255,255,255,0.5),
    inset -10px 0 100px rgba(0,0,255,0.5),
    0 0 20px #fff,
    -5px 0 30px rgba(255,255,255,0.5),
    5px 0 30px rgba(0,0,255,0.5);
}

多个小球排列

使用 flexbox 或 grid 布局可以轻松排列多个小球。

.container {
  display: flex;
  gap: 20px;
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: green;
}