怎么樣使用純CSS代碼實現(xiàn)冰棍的動畫效果

小編給大家分享一下怎么樣使用純CSS代碼實現(xiàn)冰棍的動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

　　定義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代碼實現(xiàn)冰棍的動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！