当前位置：首页 > CSS

用css制作铜币

2026-03-12 06:36:31CSS

使用CSS制作铜币效果

铜币效果可以通过CSS的border-radius、box-shadow、background和gradient等属性实现。以下是具体实现方法：

HTML结构

<div class="coin"></div>

CSS样式

.coin {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8860b, #cd853f, #b8860b);
  box-shadow: 
    0 0 10px rgba(184, 134, 11, 0.8),
    inset 0 0 5px rgba(255, 215, 0, 0.5);
  position: relative;
}

.coin::before {
  content: "￥";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: gold;
  font-size: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

添加更多细节

为了使铜币更逼真，可以添加边缘高光和纹理效果：

.coin::after {
  content: "";
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
}

动画效果

添加旋转动画增强视觉效果：

.coin {
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

响应式调整

通过CSS变量使铜币大小可调整：

用css制作铜币

:root {
  --coin-size: 100px;
}

.coin {
  width: var(--coin-size);
  height: var(--coin-size);
}

.coin::before {
  font-size: calc(var(--coin-size) * 0.3);
}