css制作红色小球

使用CSS制作红色小球

方法1：使用纯CSS

通过border-radius属性设置为50%创建圆形，并设置背景色为红色。

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

方法2：添加阴影效果

为红色小球增加阴影效果，使其更具立体感。

.red-ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

方法3：使用渐变背景

通过CSS渐变创建更丰富的视觉效果。

.red-ball {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #ff0000, #cc0000);
  border-radius: 50%;
}

方法4：添加动画效果

让红色小球具有跳动动画。

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

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

方法5：响应式设计

使用相对单位使小球大小可随容器变化。

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

以上方法可根据实际需求选择或组合使用，创建不同风格的红色小球效果。