css制作小球

使用CSS制作小球

通过CSS可以轻松创建各种样式的小球效果，以下是几种常见方法：

基础圆形小球

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

• border-radius: 50%将元素变为完美圆形
• 调整width和height可改变小球大小
• 修改background-color改变颜色

带阴影效果的小球

.ball-shadow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5e00, #dd3300);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

• radial-gradient创建立体渐变效果
• box-shadow添加投影增强立体感

弹性动画小球

.bouncing-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  animation: bounce 0.8s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

• animation属性实现弹跳动画
• transform: translateY控制垂直移动
• infinite alternate使动画循环往复

3D立体小球

.ball-3d {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    #ffffff, #f0f0f0 20%, #d9d9d9 40%, #bfbfbf 60%, #999999);
  box-shadow: inset -10px -10px 20px rgba(0,0,0,0.2),
              5px 5px 15px rgba(0,0,0,0.3);
}

• 多层radial-gradient模拟光照效果
• inset阴影创造凹陷视觉效果
• 外部阴影增强3D感

响应式小球

.responsive-ball {
  width: 10vw;
  height: 10vw;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  background-color: #4CAF50;
}

• vw单位使小球尺寸随视口变化
• min-width/height确保最小可读性

这些方法可以组合使用，通过调整CSS属性值可获得不同视觉效果的小球。现代CSS还支持更复杂的特效如filter: blur()模糊效果、mix-blend-mode混合模式等，可进一步丰富小球的表现形式。