小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

寒冬来临了，如果加上冰棒会不会更加的瑟瑟发抖，现在有冰激凌、雪糕等，但是儿时记忆中的白色冰棒还是很深刻的，这里为了色彩，选择了绿豆冰棒绘制。

容器

<div class="popsicle"></div>

绘制绿色冰棒我们准备一个div元素足以，接下来就是它的变身时刻。

样式

我们需要准备：冰块和冰棍，然后组合成冰棒。

冰块

冰块有两部分组成，一是冰本身，一是暗色条。

冰的宽高比为：1 : 1.7，其中10%的是白色，其他是绿色，0.5倍的宽高部分进行弧度处理

.popsicle {
    --w: 100px;
    --c1: #9db328;
    --c2: #fdfdfd;
    --c3: #5a5757;
    --c4: #eebc6c;
    width: var(--w);
    height: calc(var(--w) * 1.7);
    background: linear-gradient(to bottom, var(--c1) 90%, var(--c2) 90%);
    border-radius: 50% 50% 5% 5%/calc(var(--w) * 0.5) calc(var(--w) * 0.5) 5% 5%;
    box-shadow: 0 0 calc(var(--w) * 0.05) var(--c3);
    position: relative;
}

先做看着有点感觉了，我们在加上暗色条，在此之前，我们先给暗色条和冰棍一个共同的样式：

宽是冰块宽的0.2倍

.popsicle::before,
.popsicle::after {
    content: '';
    position: absolute;
    width: calc(var(--w) * 0.2);  
}

暗色条样式：

.popsicle::before {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 50%/calc(var(--w) * 0.1);
    height: var(--w);
    left: calc(var(--w) * 0.2);
    top: 25%;
    box-shadow: calc(var(--w) * 0.4) 0 0 rgba(0, 0, 0, .2);
}

此时看着是不是更加的清晰了呢，那我们再接再厉。

冰棍

利用伪元素来实现这个效果，如下：

.popsicle::after {
    height: calc(var(--w) * 0.8);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 20%, transparent 20%), linear-gradient(to bottom, var(--c4), var(--c4));
    border-radius: 0 0 50% 50%/0 0 calc(var(--w) * 0.1) calc(var(--w) * 0.1);
    left: 50%;
    bottom: calc(var(--w) * -0.8 + var(--w) * 1.7 * 0.06);
    transform: translateX(-50%);
}

总结

冰棒的大小随着--w改变而自适应的改变，我们要注意冰棍、冰块的宽高比，否则看着会有点突兀，当然你如果想要其他颜色的冰棒，只需修改颜色变量即可。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。