css奖杯制作

CSS奖杯制作方法

使用CSS绘制奖杯需要结合HTML和CSS的图形绘制技术，主要通过border、box-shadow和transform等属性实现。以下是具体实现步骤：

HTML结构

<div class="trophy">
  <div class="cup"></div>
  <div class="base"></div>
  <div class="handle left"></div>
  <div class="handle right"></div>
</div>

CSS样式

奖杯杯体部分：

.trophy {
  position: relative;
  width: 100px;
  height: 150px;
  margin: 50px auto;
}

.cup {
  width: 60px;
  height: 80px;
  background: gold;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

奖杯底座：

.base {
  width: 80px;
  height: 20px;
  background: gold;
  border-radius: 5px;
  position: absolute;
  bottom: 0;
  left: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

奖杯把手（左右两侧）：

.handle {
  width: 10px;
  height: 40px;
  background: gold;
  position: absolute;
  top: 30px;
  border-radius: 5px;
}

.handle.left {
  left: 5px;
  transform: rotate(-30deg);
}

.handle.right {
  right: 5px;
  transform: rotate(30deg);
}

进阶效果增强

添加金属光泽效果：

.cup {
  background: linear-gradient(
    135deg,
    gold 0%,
    #ffd700 50%,
    #daa520 100%
  );
}

添加3D旋转动画：

.trophy {
  animation: rotate 5s infinite linear;
}

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

响应式调整

根据屏幕尺寸调整奖杯大小：

@media (max-width: 600px) {
  .trophy {
    transform: scale(0.7);
  }
}

通过以上CSS代码组合，可以创建一个具有金属质感、带把手和底座的奖杯图形。可根据需要调整颜色、尺寸和动画效果，实现不同风格的奖杯设计。