当前位置：首页 > CSS

css制作篮球

2026-03-11 17:44:01CSS

CSS 篮球制作方法

使用CSS可以创建一个简单的篮球图形，主要通过border-radius、box-shadow和渐变等属性实现。

HTML结构

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

CSS样式

.basketball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, #f77d0a, #d35400);
  box-shadow: inset -15px -15px 30px rgba(0, 0, 0, 0.5);
  position: relative;
}

.basketball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 4px solid #000;
  border-radius: 50%;
}

.basketball::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border: 4px solid #000;
  border-radius: 50%;
}

篮球细节优化

增加篮球的纹理线条和反光效果可以让篮球更逼真。

.basketball {
  /* 基础样式同上 */
  box-shadow: 
    inset -15px -15px 30px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(215, 84, 0, 0.8);
}

.basketball::before {
  /* 中间横线 */
  width: 180px;
  height: 0;
  border-top: 4px solid #000;
  border-radius: 0;
}

.basketball::after {
  /* 纵向弧线 */
  width: 80px;
  height: 160px;
  border: none;
  border-left: 4px solid #000;
  border-radius: 50%;
  transform: rotate(30deg);
  top: 20px;
  left: 60px;
}

动画效果

添加旋转动画让篮球动起来：

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

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

响应式调整

通过CSS变量让篮球大小可调整：

css制作篮球

:root {
  --ball-size: 200px;
}

.basketball {
  width: var(--ball-size);
  height: var(--ball-size);
}

/* 其他尺寸相关值使用calc()计算 */
.basketball::before {
  width: calc(var(--ball-size) * 0.9);
}

这些CSS技巧组合起来可以创建一个视觉效果不错的篮球图形，颜色、大小和细节都可以根据需要进行调整。