当前位置：首页 > CSS

CSS模板制作冰淇淋

2026-03-11 19:41:42CSS

使用CSS绘制冰淇淋

通过CSS的伪元素和渐变效果可以创建逼真的冰淇淋图形。以下是一个基础示例：

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

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

.cone {
  width: 60px;
  height: 100px;
  background: #E3895D;
  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: linear-gradient(to bottom, #FFC0CB, #FF69B4);
  border-radius: 50px 50px 0 0;
}

添加多层冰淇淋效果

通过叠加多个伪元素实现多色分层效果：

CSS模板制作冰淇淋

.ice-cream::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 10px;
  width: 80px;
  height: 100px;
  background: linear-gradient(to bottom, #87CEFA, #1E90FF);
  border-radius: 40px 40px 0 0;
  z-index: -1;
}

创建融化效果

使用CSS动画模拟融化状态：

CSS模板制作冰淇淋

.ice-cream::before {
  animation: melt 3s infinite alternate;
}

@keyframes melt {
  0% { transform: translateY(0); }
  100% { transform: translateY(10px) scaleX(1.1); }
}

添加装饰元素

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

.cone::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 10px;
  width: 40px;
  height: 10px;
  background: transparent;
  box-shadow: 
    0 0 0 2px #8B4513,
    5px 5px 0 2px #8B4513,
    -5px 10px 0 2px #8B4513;
  border-radius: 50%;
}

响应式调整

通过CSS变量控制大小变化：

.ice-cream {
  --size: 1;
  width: calc(100px * var(--size));
  height: calc(180px * var(--size));
}

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

这些技术可以组合使用，创建不同风格和复杂度的冰淇淋视觉效果。调整颜色、形状和动画参数可获得各种定制化设计。