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

Javanx

发布于 2019-09-04 10:27:11

1.1K0

发布于 2019-09-04 10:27:11

文章被收录于专栏：web秀web秀

在线演示地址

See the Pen DcHup by Elton Mesquita (@eltonmesquita) on CodePen.1

看到如此美丽的冰淇淋是否想吃了？哈哈，大冬天的，还是不要了。今天我们就用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的圆，就可以啦。

最终效果：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年1月18日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度