css制作球形
使用CSS制作球形
使用CSS的border-radius属性可以轻松创建球形效果。以下是几种实现方法：
基础球形
通过设置border-radius: 50%将正方形元素变为圆形，再添加渐变或阴影增强立体感：
.sphere {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, #00aaff);
box-shadow: inset 10px 10px 20px rgba(0,0,0,0.2);
}3D球形效果
结合CSS渐变和阴影模拟光照效果：
.ball {
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle at 25% 25%,
#ffffff, #ff0000 50%, #800000 70%);
box-shadow:
inset -10px -10px 30px rgba(0,0,0,0.5),
5px 5px 15px rgba(0,0,0,0.3);
}动画球形
添加CSS动画让球形旋转或脉动：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.animated-sphere {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(145deg, #ff9a9e, #fad0c4);
animation: pulse 2s infinite;
}复杂渐变球形
使用多重渐变创造更真实的材质感：
.glass-sphere {
width: 180px;
height: 180px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%,
rgba(255,255,255,0.8) 0%,
rgba(255,255,255,0.2) 50%,
transparent 70%),
linear-gradient(135deg,
rgba(100,200,255,0.8) 0%,
rgba(0,50,150,0.8) 100%);
box-shadow: 0 10px 30px rgba(0,100,200,0.3);
}注意事项
- 确保元素的
width和height相等 - 使用
radial-gradient模拟光源反射效果 - 通过
box-shadow的inset参数创造凹陷阴影 - 调整渐变中心点位置改变高光位置
- 结合
transform属性可实现3D旋转效果
以上方法可根据需要组合使用，通过调整颜色、渐变位置和阴影参数可获得不同风格的球形效果。
