图片/图形
纯CSS3逼真的气球漂浮动画特效
PetitQ
这是一款使用纯 CSS3 制作的效果非常逼真的气球漂浮动画特效。这个气球飘动效果主要使用 CSS3 animation 来制作，通过控制不同气球的位移和旋转角度，来达到气球漂浮的效果。
HTML 结构
这个气球漂浮效果的 HTML 结构使用一个
也想出现在这里？联系我们吧
容器来包裹一组元素。每一个元素是一个气球。
<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 动画。具体动画代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录