用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技术组合可以创建出逼真的铜币视觉效果，通过调整颜色值和阴影参数可获得不同金属质感的硬币。
