css制作篮球

2026-02-13 05:08:23CSS

css制作篮球

使用CSS绘制篮球

通过CSS的border-radius和gradient属性可以创建一个逼真的篮球效果。以下是一个完整的实现方法：

<div class="basketball"></div>

.basketball {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 30% 30%, #ff8c00, #e67300);
  border-radius: 50%;
  position: relative;
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.3);
}

.basketball::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 50%;
  clip-path: polygon(
    0% 50%,
    10% 30%,
    30% 15%,
    50% 10%,
    70% 15%,
    90% 30%,
    100% 50%,
    90% 70%,
    70% 85%,
    50% 90%,
    30% 85%,
    10% 70%
  );
}

.basketball::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 50%;
  clip-path: polygon(
    50% 0%,
    30% 10%,
    15% 30%,
    10% 50%,
    15% 70%,
    30% 90%,
    50% 100%,
    70% 90%,
    85% 70%,
    90% 50%,
    85% 30%,
    70% 10%
  );
}

关键实现细节

球体形状：使用border-radius: 50%创建完美圆形
颜色渐变：radial-gradient模拟篮球的皮革质感
阴影效果：box-shadow增加立体感
篮球纹理：使用两个伪元素和clip-path创建交叉的黑色条纹

动画效果（可选）

添加旋转动画使篮球更生动：

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

.basketball {
  animation: rotate 5s linear infinite;
}