css制作篮球

使用CSS绘制篮球

通过CSS的border-radius和box-shadow属性可以创建一个逼真的篮球效果。以下是实现步骤：

HTML结构

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

CSS样式

.basketball {
  width: 200px;
  height: 200px;
  background: #e76f51;
  border-radius: 50%;
  position: relative;
  box-shadow: 
    inset -15px -15px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 0, 0, 0.3);
}

.basketball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  background: #000;
  transform: translateY(-50%);
}

.basketball::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8px;
  background: #000;
  transform: translateX(-50%);
}

添加篮球纹理细节

通过伪元素和border属性增加篮球的凹槽线条：

.basketball::before {
  /* 水平线 */
  width: 80%;
  left: 10%;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  height: 6px;
}

.basketball::after {
  /* 垂直线 */
  height: 80%;
  top: 10%;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  width: 6px;
}

创建3D效果

使用CSS渐变和阴影增强立体感：

.basketball {
  background: radial-gradient(
    circle at 30% 30%,
    #f4a261 0%,
    #e76f51 70%,
    #d62828 100%
  );
  box-shadow: 
    inset -20px -20px 60px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.4);
}

动画效果（可选）

添加旋转动画模拟篮球滚动：

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

.basketball {
  animation: roll 3s linear infinite;
}

完整代码组合后可以呈现一个带有纹理、立体感和动态效果的篮球图形。调整尺寸和颜色值可适应不同设计需求。