当前位置：首页 > CSS

css制作小球

2026-02-13 00:01:17CSS

CSS 制作小球的方法

使用 CSS 可以轻松创建各种样式的小球，以下是几种常见的方法：

使用 `border-radius` 制作圆形

通过将元素的 border-radius 设置为 50%，可以将方形元素变为圆形。这是最常见的方法。

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

添加阴影效果

使用 box-shadow 可以为小球添加立体感或发光效果。

.ball {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
}

渐变背景

使用 linear-gradient 或 radial-gradient 可以为小球添加渐变效果，使其看起来更立体。

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

动画效果

通过 CSS 动画可以让小球动起来，比如弹跳或旋转。

.ball {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

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

3D 效果

使用 transform 和 box-shadow 可以创建 3D 效果的小球。

.ball {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.3);
  transform: rotateX(20deg) rotateY(20deg);
}

使用伪元素添加高光

通过伪元素可以为小球添加高光效果，使其看起来更真实。

.ball {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;
  position: relative;
}

.ball::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

示例代码

以下是一个完整的 HTML 和 CSS 示例，展示如何创建一个带有动画和渐变效果的小球：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Ball</title>
  <style>
    .ball {
      width: 100px;
      height: 100px;
      background: radial-gradient(circle at 30% 30%, white, red);
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
      animation: bounce 2s infinite;
      position: relative;
    }

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

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-50px); }
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

通过以上方法，可以灵活地创建各种样式和效果的小球，满足不同的设计需求。

css制作小球