自己動手做一隻雪糕感受夏天的樂趣

​

夏天出了酷熱，還有西瓜，雪糕等清涼可口的食物，今天我們一起動手實作一隻雪糕把，在此之前我們先看看最終實作的效果：

實作過程

1. 定義 dom，容器中包含 2 個元素，​

   ​ice-lolly​

   ​​ 用來繪制整個雪糕的區域，​

   ​flavors​

   ​​ 雪糕，​

   ​stick​

   ​ 是雪糕的區域。

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

1. 然後将 body 居中顯示，友善展示

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

1. 繪制出冰棍的外形:​

   ​.flavors​

   ​​， 大小和寬度大家都是可以調整的，通過​

   ​border-radius​

   ​ 來設定讓雪糕更加圓潤。

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

1. 給冰棍上色:​

   ​.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);
}      

1. 增加光照效果:​

   ​.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;
}      

1. 畫出冰棍筷子：​

   ​.stick​

   ​

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

1. 給冰棍筷子加一點陰影，增加立體感：​

   ​.stick::after​

   ​

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

1. 冰棍彩色滾動起來​

   ​.flavors::before​

   ​，更加的生動

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

1. 滑鼠浮停動畫​

   ​.ice-lolly:hover​

   ​, 讓雪糕産生簡單的動畫效果

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

看看效果

參考資料

• github.com/comehope/fr…