javascript - HTML5 动画在材质 ui 图标形状上创建“泡沫”效果

Question

我正在制作一个拖放模块——在云图标周围——我想让各种小形状在一个循环中出现/消失——让它看起来像你在瓶子里看到的泡沫效果可乐。一种神奇的幸运符。

我将如何在循环中为这些形状的存在和不存在设置动画？

https://codesandbox.io/s/vigorous-satoshi-knusw

- 我试过添加这样的动画 - 但它并没有真正起作用 http://jsfiddle.net/zr7sb/10/

    .magic-cloud {
    
      .small {
        font-size: 16px;
      }
    
      .large {
        font-size: 146px;
      }
    
    
      .purple {
        color: #a85e9f;
      }
    
      .blue {
        color: #c9dff7;
      }
    
      .gold {
        color: #fdbd00;
      }
      .lavendar {
        color: #c698c0;
      }
    
    }
    
    
    .bubble {
      position: absolute;
    }
    
    .x1 {
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0.2;
      -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
      -moz-animation: moveclouds 15s linear infinite;
      -o-animation: moveclouds 15s linear infinite;
    }
    
    .x2 {
      left: 200px;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.5;
      -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
      -moz-animation: moveclouds 25s linear infinite;
      -o-animation: moveclouds 25s linear infinite;
    }
    .x3 {
      left: 350px;
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3;
      -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
      -moz-animation: moveclouds 20s linear infinite;
      -o-animation: moveclouds 20s linear infinite;
    }
    .x4 {
      left: 470px;
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      transform: scale(0.75);
      opacity: 0.35;
      -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
      -moz-animation: moveclouds 18s linear infinite;
      -o-animation: moveclouds 18s linear infinite;
    }
    .x5 {
      left: 150px;
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      transform: scale(0.8);
      opacity: 0.3; 
      -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
      -moz-animation: moveclouds 7s linear infinite;
      -o-animation: moveclouds 7s linear infinite;
    }
    @-webkit-keyframes moveclouds { 
      0% { 
          top: 500px;
      }
      100% { 
          top: -500px;
      }
    }
    
    @-webkit-keyframes sideWays { 
      0% { 
          margin-left:0px;
      }
      100% { 
          margin-left:50px;
      }
    }
    
    @-moz-keyframes moveclouds {     
      0% { 
          top: 500px;
      }
    
      100% { 
          top: -500px;
      }
    }
    @-o-keyframes moveclouds {
      0% { 
          top: 500px;
      }
      100% { 
          top: -500px;
      }
    }

<div className="magic-cloud">
  <CloudQueueIcon className="large" />

  <AddIcon className="small gold bubble x1" />
  <RadioButtonUncheckedOutlinedIcon className="small pink bubble x2" />
  <FiberManualRecordIcon className="small purple bubble x3" />

  <AddIcon className="small purple bubble x1" />
  <RadioButtonUncheckedOutlinedIcon className="small lavendar bubble x2" />
  <FiberManualRecordIcon className="small gold bubble x3" />
</div>

我只希望它在这个区域内动画

• 最新的分叉——需要尝试将移动的云放入一个函数中 https://codesandbox.io/s/relaxed-dream-08ueh

这是我的版本-但是尽管我可以看到它们漂浮的形状并没有真正出现-jsfiddle.net/xpb90keq/3

---

替代版本

云动画到这个 jsfiddle - jsfiddle.net/xpb90keq -</p>

---

最新版本 12 月 14 日 - 请以此为基础。 https://codesandbox.io/s/holy-tdd-57ov7?file=/src/MagicCloud.js

从左到右动画 https://codesandbox.io/s/nervous-lamarr-qhw8k

---

12 月 15 日的最新版本 - https://codesandbox.io/s/magical-wood-wjnd5 - 我得到的最新版本 - 但不确定为什么气泡会在顶部徘徊

标签： javascripthtmlcss

Answer 1

您可以通过封装在包含图标的包装器中的绝对动画元素来实现类似的效果。然后你用 pourcentage 定位这些元素并稍微延迟动画它们看起来更自然。我的小例子如下所示：

.magic-cloud {
  position: relative;
  width: 150px;
  margin-top: 50px;
}

.bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid 2px;
  border-radius: 50%;
  animation: bubbling .5s infinite;
  opacity: 0;
  z-index: -1;
}

.bubble:nth-of-type(even) {
  animation-delay: .2s;
}

.bubble.red:nth-of-type(1) {
  top: 40%;
}

.bubble.red:nth-of-type(2) {
  top: 50%;
  right: 0;
}

.bubble.red:nth-of-type(3) {
  top: 30%;
  right: 20%;
}

.bubble.blue:nth-of-type(4) {
  top: 20%;
  right: 30%;
}

.bubble.blue:nth-of-type(5) {
  top: 10%;
  left: 30%;
}

.bubble.pink:nth-of-type(6) {
  top: 15%;
  left: 40%;
}

.bubble.pink:nth-of-type(7) {
  top: 45%;
  right: 10%;
}

.bubble.pink:nth-of-type(8) {
  top: 35%;
  left: 20%;
}

.red {
  border-color: red;
}

.blue {
  border-color: blue;
}

.pink {
  border-color: pink;
}

@keyframes bubbling {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-400%);
    opacity: 0;
  }
}

<div class="magic-cloud">
  <svg class="MuiSvgIcon-root large" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h.71C7.37 7.69 9.48 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3s-1.34 3-3 3z"></path>
  </svg>
  <div class="bubble red"></div>
  <div class="bubble red"></div>
  <div class="bubble red"></div>
  <div class="bubble blue"></div>
  <div class="bubble blue"></div>
  <div class="bubble pink"></div>
  <div class="bubble pink"></div>
  <div class="bubble pink"></div>
</div>