css 制作石头
使用CSS创建石头效果
通过CSS的border-radius、box-shadow和background属性可以模拟石头的自然不规则形状和纹理。以下是一个基础实现：
.stone {
width: 100px;
height: 80px;
background: linear-gradient(135deg, #8B8B8B 0%, #5A5A5A 50%, #3A3A3A 100%);
border-radius: 50% 30% 60% 40% / 60% 40% 60% 40%;
box-shadow:
5px 5px 10px rgba(0,0,0,0.3),
inset 2px 2px 5px rgba(255,255,255,0.2);
position: relative;
}添加表面细节
通过伪元素增加石头表面的凹凸纹理：
.stone::before {
content: "";
position: absolute;
width: 20px;
height: 15px;
background: rgba(0,0,0,0.2);
border-radius: 50%;
top: 30%;
left: 20%;
transform: rotate(45deg);
}
.stone::after {
content: "";
position: absolute;
width: 15px;
height: 10px;
background: rgba(255,255,255,0.1);
border-radius: 40%;
bottom: 20%;
right: 15%;
}实现3D效果
添加旋转动画展示立体感：
.stone-3d {
transform-style: preserve-3d;
animation: rotate 8s infinite linear;
}
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}多石头组合布局
使用CSS Grid创建自然散布效果：
.stone-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 20px;
}
.stone-variation {
width: calc(80px + random(20px));
height: calc(60px + random(15px));
}响应式调整
通过媒体查询适应不同屏幕尺寸：
@media (max-width: 600px) {
.stone {
width: 60px;
height: 50px;
}
}这些CSS技巧组合可以创建出从简单到复杂的石头视觉效果，通过调整颜色、阴影和形状参数可获得不同地质风格的石头外观。
