用css制作铜币

使用CSS制作铜币效果

铜币效果可以通过CSS的渐变、阴影和边框属性实现。以下是一个完整的铜币CSS样式示例：

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

.coin {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5d76e, #d4a017);
  box-shadow: 
    0 0 10px rgba(210, 160, 30, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.3),
    inset -5px -5px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  border: 2px solid #d4a017;
}

.coin::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 40% 40%, #f5d76e, #d4a017);
  box-shadow: 
    inset 0 0 5px rgba(255, 255, 255, 0.4),
    inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.coin::after {
  content: "¥";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
  color: #8a6d0f;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}

关键样式说明

基础圆形结构

• border-radius: 50%创建圆形
• 尺寸通过width和height控制

金属质感

• 使用radial-gradient创建中心高光效果
• 主色调采用金色系（#f5d76e到#d4a017）
• 外层阴影增强立体感

细节处理

• ::before伪元素创建内圈层次
• ::after伪元素添加货币符号
• 内阴影增强金属反光效果

进阶效果调整

光泽变化 添加CSS动画使铜币产生光泽变化效果：

.coin {
  animation: shine 3s infinite alternate;
}

@keyframes shine {
  from {
    background: radial-gradient(circle at 30% 30%, #f5d76e, #d4a017);
  }
  to {
    background: radial-gradient(circle at 70% 70%, #f5d76e, #d4a017);
  }
}

3D效果 通过变换创建3D视角：

.coin {
  transform: rotateY(30deg);
  box-shadow: 
    5px 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

这些CSS技术组合可以创建出逼真的铜币视觉效果，通过调整颜色值和阴影参数可获得不同金属质感的硬币。