CSS模板制作奶茶

使用CSS制作奶茶主题的模板

CSS可以创建视觉上吸引人的奶茶主题模板，适用于网页设计或UI界面。以下是一些关键方法和样式示例：

奶茶配色方案 选择温暖的奶茶色调作为基础：

:root {
  --milk-tea: #F3E5D8;
  --brown-sugar: #B78D65;
  --boba: #5C3A21;
  --straw: #F5DEB3;
}

背景渐变效果 模拟奶茶液体分层的视觉效果：

.tea-bg {
  background: linear-gradient(
    to bottom,
    var(--brown-sugar) 0%,
    var(--milk-tea) 30%,
    var(--milk-tea) 70%,
    var(--brown-sugar) 100%
  );
  border-radius: 25px;
}

珍珠样式设计 创建圆形boba珍珠元素：

.boba {
  width: 15px;
  height: 15px;
  background-color: var(--boba);
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
  position: absolute;
}

吸管动画效果 添加动态吸管插入效果：

@keyframes straw-in {
  0% { transform: translateY(-50px) rotate(15deg); opacity: 0; }
  100% { transform: translateY(0) rotate(15deg); opacity: 1; }
}

.straw {
  width: 8px;
  height: 120px;
  background-color: var(--straw);
  transform: rotate(15deg);
  animation: straw-in 1s ease-out forwards;
}

文字排版样式 设置奶茶主题的字体风格：

.tea-title {
  font-family: 'Ma Shan Zheng', cursive;
  color: var(--boba);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  font-size: 2.5rem;
}

响应式布局调整 确保在不同设备上都能呈现良好的视觉效果：

@media (max-width: 768px) {
  .tea-cup {
    width: 200px;
    height: 250px;
  }
  .boba { width: 10px; height: 10px; }
}