纯CSS3逼真的气球漂浮动画特效

这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效。这个气球飘动效果主要使用CSS3 animation来制作，通过控制不同气球的位移和旋转角度，来达到气球漂浮的效果。

制作方法

HTML结构

这个气球漂浮效果的HTML结构使用一个<div>容器来包裹一组<span>元素。每一个<span>元素是一个气球。

<div class="envato-animate">
  <span class="envato-balloon">W</span>
  <span class="envato-balloon">e</span>
  <span class="envato-balloon">l</span>
  <span class="envato-balloon">c</span>
  <span class="envato-balloon">o</span>
  <span class="envato-balloon">m</span>
  <span class="envato-balloon">e</span>
</div>              
              

CSS样式

作为气球的容器元素.envato-animate使用绝对定位，放置在视口的中间。

.envato-animate{
  position:absolute;
  left:50%;
  top: 50%;
  width:396px;
  height: 200px;
  text-align:center;
  margin-left:-198px;
  margin-top: -100px;
}               
              

气球的外观通过.envato-balloon来实现，它设置了不同的宽度和高度，并设置border-radius:50%;，将其制作为椭圆形。

.envato-animate .envato-balloon{
  width:50px;
  height:70px;
  color:#fff;
  font-size:24px;
  line-height:50px;
  position:relative;
  font-weight:bold;
  text-align:center;
  border-radius:50%;
  background:#e74c3c;
  display:inline-block;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  font-family:'Varela Round',sans-serif;
}                
              

气球下方的三角形气嘴由.envato-balloon的伪元素来制作。

.envato-animate .envato-balloon:after{
  width:0;
  height:0;
  left:50%;
  content:'';
  bottom:-8px;
  margin-left:-8px;
  position:absolute;
  border:8px solid transparent;
  border-bottom:8px solid #e74c3c;
}                
              

然后通过nth-child选择器分别为各个气球设置不同的颜色和执行不同的animate动画。具体动画代码请参考下载文件。