css制作篮球

2026-01-28 10:45:34CSS

使用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 30px rgba(0, 0, 0, 0.5);
}

.basketball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  border: 3px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(
    0% 50%, 20% 30%, 40% 20%, 60% 20%, 80% 30%, 
    100% 50%, 80% 70%, 60% 80%, 40% 80%, 20% 70%
  );
}

.basketball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  border: 2px solid #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(
    50% 0%, 70% 20%, 80% 40%, 80% 60%, 70% 80%, 
    50% 100%, 30% 80%, 20% 60%, 20% 40%, 30% 20%
  );
}

实现原理

篮球主体使用径向渐变创建橙色到深橙色的过渡效果，border-radius: 50%使其成为完美圆形。box-shadow添加内阴影增强立体感。

css制作篮球

篮球线条使用伪元素实现：

css制作篮球

::before创建水平方向的曲线
::after创建垂直方向的曲线
clip-path定义多边形路径形成篮球特有的线条图案
通过定位和变换使线条居中

调整建议

修改篮球尺寸只需调整.basketball的width和height属性，其他尺寸会自动按比例缩放。颜色可通过修改background的渐变值调整。

添加动画效果可结合CSS动画：

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

.basketball {
  animation: bounce 1s infinite;
}