JavaScript实现打气球

「这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战」

需求分析

气球随机出现在页面底部，按照随机速度向上飘，当气球被点击，气球快速消失

步骤拆解

气球生成
气球位置确定
气球以随机速度上升
气球到达顶部
气球被点击，触发动画

气球设计

对于网站，图片的加载浪费资源很多，所以如果有方法能够替代图片，最好使用非图片方式，本文章气球的设计使用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%;
}
复制代码

DocumentFragment

DOM规定文档片段(document fragment)是一种“轻量级”文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。 DocumentFragment节点nodeType = 11

频繁添加气球非常浪费性能，因此可以创建 DocumentFragment 元素，先将气球元素添加到 DocumentFragment 中，最后将 DocumentFragment 插入到 DOM 元素中，避免动态添加DOM时造成DOM树多次加载

如何创建

//文档片段创建
var fragment = document.createDocumentFragment();
//fragment 继承了Node的所有方法
//文档片段不会改变DOM，只是相当于一个仓库
//使用方法
var div = document.createElement('div');
fragment.appendChild(div);
//只是将fragment里面的子节点添加到body中
//之后fragment删除
document.body.appendChild(fragment);
//使用文档片段，可以避免动态添加DOM时造成DOM树多次加载

复制代码