​

夏天出了酷热，还有西瓜，雪糕等清凉可口的食物，今天我们一起动手实现一只雪糕把，在此之前我们先看看最终实现的效果：

实现过程

实现雪糕过程如下：

1. 定义 dom，容器中包含 2 个元素，​​ice-lolly​​​ 用来绘制整个雪糕的区域，​​flavors​​​ 雪糕，​​stick​​ 是雪糕的区域。

<div class="ice-lolly">
    <div class="flavors"></div>
    <div class="stick"></div>
</div>

2. 然后将 body 居中显示，方便展示

# 内容居中显示
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    //background-color: darkslategray;
}

3. 绘制出冰棍的外形:​​.flavors​​​， 大小和宽度大家都是可以调整的，通过​​border-radius​​ 来设置让雪糕更加圆润。

.flavors {
    width: 19em;
    height: 26em;
    font-size: 10px;
    border-radius: 8em 8em 1em 1em;
}

4. 给冰棍上色:​​.flavors​​​ 、​​.flavors::before​​

.flavors {
    position: relative;
    overflow: hidden;
}
.flavors::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 120%;
    background: linear-gradient(
        hotpink 0%,
        hotpink 25%,
        deepskyblue 25%,
        deepskyblue 50%,
        gold 50%,
        gold 75%,
        lightgreen 75%,
        lightgreen 100%);
    z-index: -1;
    left: -20%;
    transform: rotate(-25deg);
}

5. 增加光照效果:​​.flavors::after​​

.flavors::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 17em;
    background-color: rgba(255, 255, 255, 0.5);
    left: 2em;
    bottom: 2em;
    border-radius: 1em;
}

6. 画出冰棍筷子：​​.stick​​

.stick {
    position: relative;
    width: 6em;
    height: 8em;
    background-color: sandybrown;
    left: calc(50% - 6em / 2);
    border-radius: 0 0 3em 3em;
}

7. 给冰棍筷子加一点阴影，增加立体感：​​.stick::after​​

stick::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 2.5em;
    background-color: sienna;
}

8. 冰棍彩色滚动起来​​.flavors::before​​，更加的生动

.flavors::before {
    animation: moving 100s linear infinite;
}

9. 鼠标浮停动画​​.ice-lolly:hover​​, 让雪糕产生简单的动画效果

.flavors::before {
    animation-play-state: paused;
}
.ice-lolly:hover .flavors::before {
    animation-play-state: running;
}

最后完成整个雪糕的开发，你是否感受到了夏天酷热中的一丝丝清凉呢。

看看效果

我们可以通过 ​​马上掘金​​ 功能来进行展示，它不仅支持 css + html 的编写，还支持是试运行，是非常方便的。效果如下： 代码片段

参考资料

• github.com/comehope/fr…