需求分析
气球随机出现在页面底部，按照随机速度向上飘，当气球被点击，气球快速消失
步骤拆解
- 气球生成
- 气球位置确定
- 气球以随机速度上升
- 气球到达顶部
- 气球被点击，触发动画
气球设计
对于网站，图片的加载浪费资源很多，所以如果有方法能够替代图片，最好使用非图片方式，本文章气球的设计使用CSS3来实现。
气球外形设计（border-radius）
CSS3中实现圆或者椭圆的一个属性，气球可以简化为三个大圆弧、一个小圆弧和一个小三角组成。那么很简单就可以使用border-radius对四个圆弧分别赋予半径便可。对于小三角的设计，类似图书标签设计，使用伪元素after
HTML每个元素都会带有两个伪元素（after,before)。
- border-radius详解
- border-radius：length/% （50%实现圆形）
- border-radius为简写，全部写为borer-top-left-radius: 1 2;(其余三个按照顺时针顺序)当1位置和2位置相同，效果为圆弧；反之为椭圆弧。_1_为left、_2_为top
气球颜色设计（box-shadow）
通常气球的颜色是变化的，既是一个渐变的效果，但是使用渐变属性有点大材小用，这里使用box-shadow(inset)来实现，简单。
box-shadow详解
box-shadow: h-shadow w-shadow blur spread color inset;
blur:阴影模糊半径; spread:阴影外延值
注意：text-shadow: h-shadow w-shadow blur color
详细代码
/* 内部颜色变化使用box-shadow(inset)实现 */ .balloon{ width: 160px; height: 160px; position: absolute; background-color: #cccccc; border-radius: 160px 160px 64px 160px;//气球主体 -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: -8px -8px 80px #faf9f9 inset;//气球颜色 } /* 使用伪元素实现尾巴 */ .balloon::after{ content: ''; //伪元素必需属性 position: absolute; right: 0; bottom: 2px; width: 0; height: 0; border: 8px solid transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right-color: #faf9f9; border-radius: 50%; } 复制代码
初始化气球
DOM规定文档片段(document fragment)是一种“轻量级”文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
频繁添加气球非常浪费性能，因此可以创建 DocumentFragment 元素，先将气球元素添加到 DocumentFragment 中，最后将 DocumentFragment 插入到 DOM 元素中，避免动态添加DOM时造成DOM树多次加载。
同时在初始化气球时，设定气球的速度，速度使用随机数生成，保证气球的以不同的速度上升。
function init(num){ //文档片段创建 var fragment = document.createDocumentFragment(); for(var i=0;i<num;i++){ var balloon = document.createElement('div'), randomSpeed = (Math.random() * bigSpeed) | 0 + 5; balloon.className = 'balloon'; balloonPos(balloon); balloon.speed = randomSpeed; balloonList.push(balloon); fragment.appendChild(balloon); } document.body.appendChild(fragment); } 复制代码
气球爆炸
当气球被点击时，气球会有类似放气的效果，本项目通过设置气球宽度和高度减小、速度加快、rotate配合左右摆动来模拟放气效果。
obj.speed++; obj.style.top = obj.offsetTop-obj.speed+'px'; obj.style.width = obj.offsetWidth-10+'px'; obj.style.height = obj.offsetHeight-10+'px'; obj.style.transform = 'rotate(' + random[index] + 'deg)'; 复制代码
气球点击
页面中产生了很多气球，给每个气球都绑定 click 事件浪费性能，而且每个气球的处理函数是相同的，因此使用事件委托通过 document 监听 click 事件，判断触发 click 事件的元素是否为 ballon 即可。
document.addEventListener('click', function(e){ if (e.target.className === 'balloon'){ // 气球点击处理函数 } });
