居中显示：

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:8em8em1em1em;

}

给冰棍上色：

.flavors{

position:relative;

overflow:hidden;

}

.flavors::before{

content:'';

position:absolute;

width:140%;

height:120%;

background:linear-gradient(

hotpink0%,

hotpink25%,

deepskyblue25%,

deepskyblue50%,

gold50%,

gold75%,

lightgreen75%,

lightgreen100%);

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:003em3em;

}

给冰棍筷子加一点阴影，增加立体感：

.stick::after{

content:'';

position:absolute;

width:inherit;

height:2.5em;

background-color:sienna;

}

让冰棍的色彩滚动起来：

.flavors::before{

animation:moving100slinearinfinite;

}

@keyframesmoving{

to{

background-position:01000vh;

}

}

最后，增加交互效果，当鼠标悬停时才播放动画：

.flavors::before{

animation-play-state:paused;

}

.ice-lolly:hover.flavors::before{

animation-play-state:running;

}

以上是“怎么样使用纯CSS代码实现冰棍的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页名称：怎么样使用纯CSS代码实现冰棍的动画效果
文章起源：http://lswzjz.com/article/pscpgg.html