css奖杯制作
CSS奖杯制作方法
使用CSS绘制奖杯主要涉及形状组合、渐变和阴影效果的运用。以下是实现奖杯效果的两种常见方法：
纯CSS绘制奖杯
通过多个div元素叠加组合成奖杯形状，利用CSS的border-radius、transform和box-shadow属性创建立体效果：
.trophy {
position: relative;
width: 100px;
height: 180px;
}
.cup {
width: 80px;
height: 100px;
background: linear-gradient(to bottom, #FFD700, #FFA500);
border-radius: 40px 40px 0 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.stem {
width: 20px;
height: 60px;
background: linear-gradient(to right, #C0C0C0, #FFFFFF);
margin: 0 auto;
}
.base {
width: 60px;
height: 10px;
background: #FFA500;
border-radius: 5px;
margin: 0 auto;
}SVG与CSS结合方案
使用SVG绘制奖杯轮廓，通过CSS添加动画和交互效果：
<svg class="trophy-svg" viewBox="0 0 100 150">
<path d="M30,20 L70,20 L75,70 L25,70 Z" fill="url(#gold-gradient)"/>
<rect x="45" y="70" width="10" height="50" fill="#silver"/>
</svg>
<style>
.trophy-svg {
width: 150px;
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}
#gold-gradient {
stop-color: #FFD700;
stop-opacity: 1;
}
</style>进阶效果实现
金属质感增强 使用多重渐变和光晕效果增强金属质感：
.cup {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent),
linear-gradient(to bottom, #FFD700 0%, #FFA500 50%, #DA9100 100%);
}
动画效果 添加悬停动画和光泽移动效果：
.trophy:hover {
transform: scale(1.05);
animation: shine 2s infinite;
}
@keyframes shine {
0% { filter: brightness(100%); }
50% { filter: brightness(120%); }
100% { filter: brightness(100%); }
}响应式调整
通过媒体查询适配不同设备：
@media (max-width: 600px) {
.trophy {
width: 60px;
height: 120px;
}
.cup {
width: 50px;
height: 70px;
}
}实际制作时可结合伪元素(:before/:after)添加细节装饰，通过调整z-index控制图层顺序，使用transition实现平滑状态变化。复杂奖杯结构建议拆分为杯体、把手、底座等独立组件分别设置样式。
