源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义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;

 

　　}

 

　　大功告成！






本文转载自中文网