CSS模板制作冰淇淋

使用CSS制作冰淇淋图形

通过CSS的border-radius和box-shadow属性可以创建逼真的冰淇淋形状。以下是一个简单的圆锥形冰淇淋示例：

<div class="ice-cream">
  <div class="cone"></div>
</div>

.ice-cream {
  position: relative;
  width: 100px;
  height: 180px;
}

.cone {
  width: 60px;
  height: 100px;
  background: #F2C14E;
  border-radius: 0 0 30px 30px;
  position: absolute;
  bottom: 0;
  left: 20px;
}

.ice-cream:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 120px;
  background: #FF6B6B;
  border-radius: 50% 50% 0 0;
}

添加多层冰淇淋效果

通过伪元素可以创建多层口味的冰淇淋：

.ice-cream:after {
  content: '';
  position: absolute;
  top: 20px;
  left: 10px;
  width: 80px;
  height: 100px;
  background: #4ECDC4;
  border-radius: 50% 50% 0 0;
}

创建融化效果

使用CSS动画实现冰淇淋融化效果：

@keyframes melt {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.8); }
  100% { transform: scaleY(1); }
}

.ice-cream:before {
  animation: melt 3s infinite;
  transform-origin: bottom;
}

添加装饰元素

使用box-shadow创建巧克力碎或糖粒效果：

.ice-cream:before {
  box-shadow: 
    20px 10px 0 0 #5E2D04,
    40px 30px 0 0 #5E2D04,
    60px 20px 0 0 #5E2D04;
}

响应式调整

通过媒体查询使冰淇淋图形适应不同屏幕尺寸：

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

这些CSS技术可以组合使用，创建各种风格的冰淇淋图形。调整颜色、大小和形状参数可以制作不同口味的冰淇淋视觉效果。