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混合模式等，可进一步丰富小球的表现形式。
