css3教程_CSS3案例逼真的气球漂浮动画特效

作者:css3教程更新于： 2015-09-16 11:29:10

以下是特效的简要css3教程,这这是一款生产纯CSS3效果非常逼真飘气球动画效果。气球飘动使用CSS3动画的主要作用，以产生，通过控制位移和不同气球的转动到达气球浮动效果。
 


　　制作方法
　　HTML结构
　　这个气球漂浮效果的HTML结构使用一个容器来包裹一组元素（以div标签和span标签结束）。每一个元素是一个气球。

　　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;
}

　　以上就是css3教程的气球漂浮效果，然后通过nth-child选择器分别为各个气球设置不同的颜色和执行不同的animate动画。了解更多相关资讯或视频教程欢迎进入课课家教育查询详情。