CSS模板制作奶茶

CSS模板制作奶茶主题样式

通过CSS可以创建奶茶主题的网页元素样式，包括颜色、按钮、卡片等设计。以下是实现奶茶风格UI的CSS代码示例：

颜色定义

:root {
  --milk-tea: #F3D7B5;
  --brown-sugar: #A67C52;
  --bubble: #E8C4C4;
  --matcha: #C1CE9F;
  --strawberry: #FFB6C1;
}

按钮样式

.tea-button {
  background-color: var(--brown-sugar);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  font-family: 'Quicksand', sans-serif;
  box-shadow: 0 4px 8px rgba(166, 124, 82, 0.3);
  transition: all 0.3s ease;
}

.tea-button:hover {
  background-color: var(--milk-tea);
  transform: translateY(-2px);
}

卡片容器

.tea-card {
  background-color: var(--milk-tea);
  border-radius: 15px;
  padding: 20px;
  max-width: 300px;
  margin: 10px;
  box-shadow: 0 6px 12px rgba(243, 215, 181, 0.2);
}

.tea-card h3 {
  color: var(--brown-sugar);
  border-bottom: 2px dashed var(--bubble);
  padding-bottom: 8px;
}

动画效果

@keyframes bubble {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.bubble-effect {
  animation: bubble 2s infinite;
}

响应式布局

@media (max-width: 768px) {
  .tea-card {
    max-width: 100%;
    margin: 10px 0;
  }
}

这些CSS代码可以应用于网页元素，创建出温暖舒适的奶茶主题界面。颜色变量可根据实际需求调整，匹配不同奶茶品种的色调。动画效果能为页面添加趣味性，模拟奶茶中的气泡动态。