怎么样使用纯CSS代码实现冰棍的动画效果

小编给大家分享一下怎么样使用纯CSS代码实现冰棍的动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　代码解读

　　定义dom，容器中包含2个元素：

　　<divclass="ice-lolly">

　　<divclass="flavors"></div>

　　<divclass="stick"></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: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代码实现冰棍的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！