自己动手做一只雪糕感受夏天的乐趣

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

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

实现过程

实现雪糕过程如下：

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…