当前位置：首页 > CSS

CSS模板制作冰淇淋

2026-01-28 12:39:30CSS

使用CSS创建冰淇淋图形

通过CSS的border-radius和渐变背景可以制作逼真的冰淇淋球效果。以下是一个简单的三色冰淇淋CSS实现方案：

<div class="ice-cream">
  <div class="flavor strawberry"></div>
  <div class="flavor vanilla"></div>
  <div class="flavor chocolate"></div>
  <div class="cone"></div>
</div>

.ice-cream {
  position: relative;
  width: 120px;
  height: 200px;
}

.flavor {
  width: 100px;
  height: 80px;
  border-radius: 50% 50% 45% 45%;
  position: absolute;
  left: 10px;
}

.strawberry {
  background: linear-gradient(to bottom, #ff6b88, #ff4757);
  top: 0;
}

.vanilla {
  background: linear-gradient(to bottom, #f5f5dc, #f0e68c);
  top: 70px;
}

.chocolate {
  background: linear-gradient(to bottom, #5c3317, #964b00);
  top: 140px;
}

.cone {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid #f4a460;
  position: absolute;
  top: 220px;
  left: 10px;
}

添加动画效果

为冰淇淋添加融化动画效果，可以使用CSS关键帧动画：

CSS模板制作冰淇淋

.flavor {
  animation: melt 5s infinite alternate;
}

@keyframes melt {
  0% {
    transform: scaleY(1);
    border-radius: 50% 50% 45% 45%;
  }
  100% {
    transform: scaleY(0.8);
    border-radius: 50% 50% 30% 30%;
  }
}

制作冰淇淋阴影

增加阴影效果增强立体感：

CSS模板制作冰淇淋

.flavor {
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 -10px 20px rgba(255,255,255,0.3);
}

.cone {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

响应式调整

使用CSS变量使冰淇淋大小可调整：

:root {
  --ice-cream-size: 120px;
}

.ice-cream {
  width: var(--ice-cream-size);
  height: calc(var(--ice-cream-size) * 1.6);
}

@media (max-width: 600px) {
  :root {
    --ice-cream-size: 80px;
  }
}

添加装饰元素

制作冰淇淋上的糖粒或巧克力碎装饰：

.flavor::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  background: 
    radial-gradient(circle at 10px 5px, white 2px, transparent 3px),
    radial-gradient(circle at 30px 5px, white 2px, transparent 3px),
    radial-gradient(circle at 50px 5px, white 2px, transparent 3px);
  top: 5px;
}