前言
昨天再次收到"月球居民爱丽丝"的投稿(非常感谢"月球居民爱丽丝")，希望做一个冰淇淋加载动画，原图：
在线演示地址
[codepen_embed height=“350” theme_id=“1” slug_hash=“dxMedv” data-default-tab=‘result’ user=“javanf”]See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.[/codepen_embed]
看到如此美丽的冰淇淋是否想吃了？哈哈，大冬天的，还是不要了。今天我们就用CSS来制作一个冰淇淋吧。
解析
1、 抛开动画部分，冰淇淋分为2部分，能吃的冰淇淋和下方的木棍（都是可以直接用样式画出的）
2、 动画部分，细数有4种颜色，红色、米色、蓝色、橙色。
3、 冰淇淋左上方的高光效果
通过这样的解析，你是不是也可以制作一个简单冰淇淋了呢？
下面我们按步骤实现。
第一步（结构）
<div class="ice-cream">
<div class="body"></div>
<div class="footer"></div>
</div>
按照解析，我们把它也分成上下结构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;
}
这个效果相信很多小伙伴都会实现，2部分都是通过border-radius圆角来改变形状。这里就不做多的说明了。
第二步（动画）
同理，按解析，我们添加4种颜色到冰淇淋上面。
...
<div class="body">
<div class="loading">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
添加不同颜色
.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;
}
发现把我们的整个冰淇淋都个盖住了，这时只需要添加overflow: hidden;即可。
.body{
...
overflow: hidden;
}
然后我们把颜色部分旋转一个角度，并且使其动起来。
.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;
}
}
这时候你会发现怎么调整，动画中间都会有断层。
所以我的解决方案是，重新copy一份颜色，让其可持续循环的。
<div class="loading">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
.loading{
position: absolute;
top: -213px;
left: -27px;
width: 200px;
transform: rotate(45deg);
animation: move 2.5s linear infinite;
}
@keyframes move{
from {
top: -213px;
left: -27px;
}
to {
top: -46px;
left: -83px;
}
}
.loading .line{
height: 40px;
}
.loading .line:nth-child(1),
.loading .line:nth-child(5){
background: #ff7632;
}
.loading .line:nth-child(2),
.loading .line:nth-child(6){
background: #46b0ff;
}
.loading .line:nth-child(3),
.loading .line:nth-child(7){
background: #fffce5;
}
.loading .line:nth-child(4),
.loading .line:nth-child(8){
background: red;
}
第三步（高光效果）
这个就是在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动画冰激淋流动的遮罩效果
源文件地址：冰激凌加载动画（遮罩图层）.aep
表情