CSS

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

前言

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

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

看到如此美丽的冰淇淋是否想吃了?哈哈,大冬天的,还是不要了。今天我们就用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;
}

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

这个效果相信很多小伙伴都会实现,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;
}

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一份颜色,让其可持续循环的。

<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动画冰激淋流动的遮罩效果

演示地址:css3实现ae动画冰激淋流动的遮罩效果
源文件地址:冰激凌加载动画(遮罩图层).aep

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注