loading动画_超级简单的CSS加载动画（冰淇淋loading加载动画）

点击右上方红色按钮关注“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-radiu