网站建设 >

查看其它板块

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

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

修文网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联于2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

代码解读

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

居中显示：

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

本文题目：怎么样使用纯CSS代码实现冰棍的动画效果
网址分享：http://cdkjz.cn/article/pscpgg.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线成都：13518219792 座机：028-86922220

在线咨询提交需求

友情链接交换友情链接

广安网站建设手机网站制作网站设计禾巨建站西部信息服务器托管西部信息中心成都塑料加工顺泽窗帘吉安网站建设广安网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图