【前端进阶开发日记 】那就来封装一个城市选择器吧

前言

前两天写了个 404访问页面 的文章，不知道为啥突然就火了，点赞量蹭蹭蹭的往上涨。那就来个趁热打铁的loading页吧，可以和 404页面 一起食用哦！

打铁背景

🤔 打铁肯定得是红彤彤的背景色了，顺便加一些点缀吧（也就是加了两个圆圈圈）

<div class="container"><div class="bg"></div>
</div> 

🛎️ 随手画两个圆连在一起当做背景，定位就用 transform 实现

.container {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);height: 400px;width: 400px;
}
.container .bg {left: 50%;position: absolute;transform: translateX(-50%);background-color: rgba(255, 86, 86, 0.2);border-radius: 50%;bottom: -5px;height: 450px;width: 450px;
}
.container .bg:after {left: 50%;position: absolute;transform: translateX(-50%);background-color: rgba(255, 86, 86, 0.2);border-radius: 50%;bottom: 0;content: "";height: 350px;width: 350px;
} 

打铁匠的身体

🤔 为了显示的Q萌一点，可以和背景一样都是圆咕噜的。

<div class="shape"></div> 

.shape {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);background-color: #eab08c;border-radius: 50%;height: 250px;overflow: hidden;width: 250px;
}
.shape:after {content: "";left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);background-color: #777a7a;border-radius: 50%;height: 200%;top: 130%;width: 200%;
}