点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

昨天再次收到"月球居民爱丽丝"的投稿(非常感谢"月球居民爱丽丝")，希望做一个冰淇淋加载动画，原图：

css3实现ae动画冰激淋流动的遮罩效果

看到如此美丽的冰淇淋是否想吃了？哈哈，大冬天的，还是不要了。今天我们就用CSS来制作一个冰淇淋吧。

解析

1、 抛开动画部分，冰淇淋分为2部分，能吃的冰淇淋和下方的木棍(都是可以直接用样式画出的)

2、 动画部分，细数有4种颜色，红色、米色、蓝色、橙色。

3、 冰淇淋左上方的高光效果

通过这样的解析，你是不是也可以制作一个简单冰淇淋了呢？

下面我们按步骤实现。

第一步(结构)

按照解析，我们把它也分成上下结构2部分，身体(冰淇淋)、脚(木棍)。

.ice-cream{  width: 50px;  height: 120px;  margin: 100px auto; } .body{  margin: 0 auto;  width: 50px;  height: 100px;  border-radius: 30px 30px 10px 10px;  background: red; } .footer{  width: 10px;  height: 15px;  margin: 0 auto;  border-radius: 0 0 4px 4px;  background: #a77b64; }

css3实现ae动画冰激淋流动的遮罩效果

这个效果相信很多小伙伴都会实现，2部分都是通过border-radius圆角来改变形状。这里就不做多的说明了。

第二步(动画)

同理，按解析，我们添加4种颜色到冰淇淋上面。

... 

添加不同颜色

.body{  position: relative;  ... } ... .loading{  position: absolute;  width: 200px; } .loading .line{  height: 40px; } .loading .line:nth-child(1){  background: #ff7632; } .loading .line:nth-child(2){  background: #46b0ff; } .loading .line:nth-child(3){  background: #fffce5; } .loading .line:nth-child(4){  background: red; }

css3实现ae动画冰激淋流动的遮罩效果

发现把我们的整个冰淇淋都个盖住了，这时只需要添加overflow: hidden;即可。

.body{  ...  overflow: hidden; }

css3实现ae动画冰激淋流动的遮罩效果

然后我们把颜色部分旋转一个角度，并且使其动起来。

.loading{  position: absolute;  width: 200px;  top: -77px;  left: -89px;  transform: rotate(45deg);  animation: move 2.5s linear infinite; } @keyframes move{  from {  top: -77px;  left: -89px;  }  to {  top: 9px;  left: -84px;  } }

css3实现ae动画冰激淋流动的遮罩效果

这时候你会发现怎么调整，动画中间都会有断层。

所以我的解决方案是，重新copy一份颜色，让其可持续循环的。

第三步(高光效果)

这个就是在body上面添加一个圆弧。

大家应该都看过前面的CSS3动画解析抖音 LOGO制作文章了，这里面有制作圆弧的示例。

.body:before{  position: absolute;  content: "";  width: 25px;  height: 25px;  border: 5px solid #fff;  border-right: 5px solid transparent;  border-top: 5px solid transparent;  border-left: 5px solid transparent;  border-radius: 100%;  top: 5px;  left: 5px;  transform: rotate(120deg);  opacity: 0.7;  z-index: 10; }

利用border画出1/4的圆，就可以啦。

最终效果：

css3实现ae动画冰激淋流动的遮罩效果

不知道大家有没有get到每次开发的小经验了？开发前先分析，分小步骤，完成各个功能点。

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”