效果预览

https://codepen.io/strugglingBoy/pen/VEzEqJ

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/025-hot-air-balloon

代码解读

热气球由热气袋和篮子所组成，.envelope里面的第一个span标签是热气袋的制作，热气袋是由一个圆形和一个等腰三角形制作出来的，等腰三角形的顶角因为overlflow:hidden而给切掉（隐藏）而形成了梯形的样子。第二个span是热气袋子内部的纹理制作。.basket中的四个span标签是篮子上面的四个绳子的制作

1.html代码

<div class="hot-air-balloon">
	<div class="envelope">
		<span></span>
		<span></span>
	</div>
	<div class="basket">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

2.css代码

蓝天背景的制作

body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(deepskyblue, skyblue, lightblue 20%);
}

热气袋的制作

.envelope span {
	position: absolute;
	width: 100%;
	height: 12em;
	border-radius: 50%;
	color: orange;
	background-color: currentColor;
}
.envelope span::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10em 5.5em 0 5.5em;
	border-style: solid;
	border-color: currentColor transparent transparent transparent;
	left: calc(50% - 5.5em);
	top: 8.45em;
}

热气带内部纹理的制作

.envelope span:nth-child(2) {
	transform: scaleX(0.4);
	filter: brightness(0.85) contrast(1.4);
}

篮子的制作

.basket::before {
	content: '';
	box-shadow: inset 0 .3em saddlebrown;
	position: absolute;
	width: 100%;
	height: 1.6em;
	background-color: peru;
	bottom: 0;
	border-radius: 0 0 0.5em 0.5em;
}

绳索的制作

.basket span {
	position: absolute;
	width: 0.1em;
	height: 1.5em;
	background-color: burlywood;
	left: calc((var(--n) - 1) * 0.6em);
	transform-origin: bottom;
	transform: rotate(calc(var(--r) * 7deg));
}

热气球上下飘动的动画制作

@keyframes drift {
	to {
		transform: translateY(-5%);
	}
}

总结

三角形和圆形的相切那里稍微有点麻烦(不然到时认真看的时候有点怪怪的)，这时需要借助高中的数学知识，不介意可以直接用f12来进行微调

最后大功告成