49.纯 CSS 创作一支诱人的冰棍

原文地址：https://segmentfault.com/a/1190000015257561

感想：重点在让色彩滚动起来-》background-position: 0 1000vh; 

HTML code：

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

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: darkslategray;
}
.ice-lolly:hover .flavors::before{
    animation-play-state: running;
}
/* 绘制冰棍的外形 */
.flavors{
    position: relative;
    width: 19em;
    height: 26em;
    font-size: 10px;
    border: 1px solid white;
    border-radius: 8em 8em 1em 1em;
    /* 溢出隐藏 */
    overflow: hidden;
}
/* 给冰棍上色 */
.flavors::before{
    content: '';
    width: 140%;
    height: 120%;
    border: 1px solid blue;
    position: absolute;
    left: -20%;
    background: linear-gradient(
        hotpink 0%,
        hotpink 25%,
        deepskyblue 25%,
        deepskyblue 50%,
        gold 50%,
        gold 75%,
        lightgreen 75%,
        lightgreen 100%
    );
    z-index: -1;
    transform: rotate(-25deg);
    animation: moving 100s linear infinite;
    animation-play-state: paused;
}
@keyframes moving{
    to{
        background-position: 0 1000vh;
    }   
}
/* 来一点光照效果 */
.flavors::after{
    content: '';
    width: 2em;
    height: 17em;
    border-radius: 1em;
    position: absolute;
    left: 2em;
    bottom: 2em;
    background-color: rgba(255, 255, 255, 0.4);   
}
/* 画出冰棍筷子 */
.stick{
    position: relative;
    width: 6em;
    height: 10em;
    left: calc(50% - 6em / 2);
    border-radius: 0 0 3em 3em;
    background-color: sandybrown;
}
/* 给冰棍筷子加一点阴影，增加立体感 */
.stick::after{
    content: '';
    width: inherit;
    height: 2.5em;
    position: absolute;
    background-color: sienna;
}