当前位置：首页 > CSS

css 制作石头

2026-03-31 22:09:59CSS

使用 CSS 制作石头效果

通过 CSS 的 border-radius、box-shadow 和 gradient 等属性，可以模拟石头的自然外观。以下是一种实现方法：

HTML 结构

css 制作石头

<div class="stone"></div>

CSS 样式

.stone {
  width: 100px;
  height: 80px;
  background: linear-gradient(135deg, #8B8B8B 0%, #5A5A5A 50%, #3A3A3A 100%);
  border-radius: 50% 50% 40% 60% / 60% 50% 70% 40%;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.3),
    inset 2px 2px 5px rgba(255, 255, 255, 0.2);
  position: relative;
}

添加纹理细节

通过伪元素增加石头的凹凸纹理：

css 制作石头

.stone::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 20%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  top: 20%;
  left: 30%;
  transform: rotate(45deg);
}

实现立体感

调整阴影和光效增强立体效果：

.stone {
  /* 原有样式基础上追加 */
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(0, 0, 0, 0.1);
}

动画效果（可选）

添加轻微浮动动画模拟自然状态：

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.stone {
  animation: float 3s ease-in-out infinite;
}

通过调整 border-radius 的百分比值可以改变石头形状，修改渐变色值可适配不同石材效果（如花岗岩、石灰岩等）。