公开课《多彩气球上升》

今天是个小的项目，项目虽小，知识点颇多！先来个动画演示一下逼真的风吹气球飘！
原版：

为了学习，简化重复，便于理解，修改代码：效果演示：

好！现在开始分析代码：
html框架：（格式过于简单，无特别说明）
主要是要看css代码：
思路：需要==>让文字居中-----在把

标签背景变成气球样子（气球分上部分一个球型，下部分一个三角）----规划气球起始位置—设置运动时间—设置运动停止位置

让文字居中前，先初始化简单设置一下：
（这里有两个知识点：CSS变量申明，calc函数计算）

文字居中方法：

#wrap{
	background-color: blue;
	height: 100vh;
	/*display flex 彈性盒模型*/
	display: flex;
	justify-content: center;
	padding-top: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

以上代码两个知识点（弹性盒模型+怪异盒模型）
弹性盒模型使得文字居中：
怪异盒模型进行距离自动计算定高：
这里补充一点，height用的是VH单位：补充知识点如下（自行百度）：
视窗效果演示对比：

接下来我们要把

标签背景变成气球样子，也就是绿色填充的部分：
这里的知识点：倒圆角其实是有8个点（不过小编也没有整明白）
现在气球做出来了，有点歪，我们这里需要用到旋转：
解析一下上面的代码：
气球上半部分做好了（球型），接下来是下半部分内容了（三角形）：


三角形的做法知识点补充（自己试试）：
接下是CSS3中的知识点了，自己都还没学明白也就一笔带过了：
接下来就是附上源码了：
精简版源码（精简版便于理解）：

:root{
	--w:140px;
	--half:calc(var(--w) / 2);
}

body{
	margin: 0;
	background: #dfd3c3 url(../images/bg.svg);
}


#wrap{
	background-color: blue;
	height: 100vh;
	/*display flex 彈性盒模型*/
	display: flex;
	justify-content: center;
	padding-top: 20px;
	box-sizing: border-box;
	overflow: hidden;
}
.balloon{
	width: var(--w);
	height: var(--w);

	background: green;
    /*border-radius: 100px 50px 20px 50px / 100px 75px 20px 3px;*/
    /* 斜杠前后的四个值顺序代表   左上角 右上角 右下角 左下角*/
 	/* 斜杠前代表水平方向      斜杠后代表垂直方向*/

	border-radius: var(--half) var(--half) 0 var(--half);
	/* transform是从后往前执行 */
	transform: rotate(45deg) translate(50vh,50vh);
	/*transform: translate(10vh,10vh) rotate(45deg); */

	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.balloon h2{
	color: #fff;
	font-size: 50px;
	transform: rotate(-45deg);
}
.balloon:before{
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	bottom: -10px;
	right: -10px;
	transform: rotate(45deg);

	border: 20px solid;
	border-color: transparent #000 transparent transparent;
}
.balloon:nth-child(1){
	/*氣球背景顏色*/
	background: rgba(182, 15, 97, 0.7);
	/*氣球的陰影*/
	box-shadow: inset 10px 10px 10px rgba(135,11,72,0.7);

	animation-fill-mode: forwards; 
	animation: rise 2s forwards,fly1 3s 2s ease-in-out infinite;
}
.balloon:nth-child(1):before{
	border-color: transparent rgba(182, 15, 97, 0.7) transparent transparent;
}
 /*气球上升 */
@keyframes rise{
	100%{
		transform: rotate(45deg) /*translate(0,0)*/;
	}
}

/*氣球上升運動另外4種*/
@keyframes fly1{
	0%,100%{
		transform: rotate(45deg) translateY(0);
	}
	50%{
		transform: rotate(53deg) translateY(-30px);
	}
}