当前位置：首页 > CSS

css 制作石头

2026-02-26 22:58:24CSS

使用 CSS 制作石头效果

通过 CSS 的 border-radius、box-shadow 和渐变背景可以模拟石头的自然外观。以下是一个简单的实现方法：

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

添加纹理细节

使用伪元素和多重阴影增强石头的真实感：

.stone {
  position: relative;
  overflow: hidden;
}

.stone::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: 
    radial-gradient(circle, transparent 20%, rgba(0,0,0,0.3) 20%),
    radial-gradient(circle, transparent 20%, rgba(0,0,0,0.3) 20%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  opacity: 0.5;
}

动画效果

添加轻微动画模拟自然石头的随机感：

@keyframes stone-move {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(18deg) translateY(-3px); }
}

.stone {
  animation: stone-move 5s ease-in-out infinite;
}

响应式调整

通过 CSS 变量控制石头大小和颜色：

css 制作石头

.stone {
  --size: 100px;
  --color-dark: #5A5A5A;
  --color-light: #8B8B8B;
  width: var(--size);
  height: var(--size);
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-dark) 100%);
}

这些技术可以组合使用来创建不同形状和风格的石头效果，调整参数可获得鹅卵石、岩石等不同变体。