這篇文章帶給大家的內容是關於如何使用純CSS實現冰棒的動畫效果（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
#https://github.com/comehope/front-end-daily-challenges
定義dom，容器包含2 個元素：
<div> <div></div> <div></div> </div>
居中顯示：
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}繪製出冰棒的外形：
.flavors {
width: 19em;
height: 26em;
font-size: 10px;
border-radius: 8em 8em 1em 1em;
}為冰棒上色：
.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);
}來一點光照效果：
.flavors::after {
content: '';
position: absolute;
width: 2em;
height: 17em;
background-color: rgba(255, 255, 255, 0.5);
left: 2em;
bottom: 2em;
border-radius: 1em;
}畫出冰棒筷子：
.stick {
position: relative;
width: 6em;
height: 8em;
background-color: sandybrown;
left: calc(50% - 6em / 2);
border-radius: 0 0 3em 3em;
}給冰棒筷子加一點陰影，增加立體感：
.stick::after {
content: '';
position: absolute;
width: inherit;
height: 2.5em;
background-color: sienna;
}讓冰棒的色彩滾動起來：
.flavors::before {
animation: moving 100s linear infinite;
}
@keyframes moving {
to {
background-position: 0 1000vh;
}
}最後，增加互動效果，當滑鼠懸停時才播放動畫：
.flavors::before {
animation-play-state: paused;
}
.ice-lolly:hover .flavors::before {
animation-play-state: running;
}大功告成！
相關推薦：
如何使用純CSS實現帶有金屬光澤的立體按鈕的動畫效果（附源碼）
#以上是如何使用純CSS實現冰棒的動畫效果（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
