当前位置：首页 > CSS

css制作小球

2026-02-27 08:39:11CSS

CSS 制作小球的方法

使用CSS可以轻松创建各种样式的小球，以下是几种常见的实现方式：

基础圆形小球

通过border-radius属性设置为50%即可创建圆形：

css制作小球

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

带阴影效果的小球

添加box-shadow属性增强立体感：

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

渐变色彩小球

使用CSS渐变创建更丰富的视觉效果：

css制作小球

.ball {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, #ffffff, #00aaff);
}

动画小球

添加CSS动画让小球动起来：

.ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff9900;
  animation: bounce 1s infinite alternate;
}

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

3D效果小球

通过多重阴影和渐变模拟3D效果：

.ball {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 10%, #ff3333 60%);
  box-shadow: 
    inset 5px 5px 10px rgba(255,255,255,0.3),
    inset -5px -5px 10px rgba(0,0,0,0.2),
    5px 5px 15px rgba(0,0,0,0.3);
}

这些方法可以根据需要组合使用，创造出各种不同风格的小球效果。调整尺寸、颜色和阴影参数可以获得完全不同的视觉效果。