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

2023-09-25 6 0

前言

前两天写了个 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%;
} 

🤔 给身体加些点缀(穿个背带裤??)

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

✋ 样式也是用的定位,将两个背带裤形式的线条定位在身体两侧

.shape .dress {position: absolute;background-color: #777a7a;height: 100px;top: 0;width: 20px;
}
.shape .dress:after, .shape .dress:before {position: absolute;border: 5px solid #a0a0a0;box-sizing: border-box;border-radius: 50%;content: "";height: 30px;left: -5px;top: 75px;width: 30px;z-index: 1;
}
.shape .dress:nth-child(1) {left: 50px;
}
.shape .dress:nth-child(2) {right: 50px;
} 

胡子老头

🤔 一个长胡子的老头应该是啥样的呢?怎样让他看起来Q萌一些呢?

💡 做成一个校园跑道形状的吧,上下圆弧形,中间长方形。

<div class="head"></div> 
.head {left: 50%;position: absolute;transform: translateX(-50%);background-color: #13242c;border-radius: 50px;height: 200px;top: -20px;width: 90px;
} 

📌 再用beforeafter两个伪元素加点头发吧,同时做点旋转角度即可

.head:after, .head:before {content: "";left: 50%;position: absolute;transform: translateX(-50%);background-color: #13242C;border-radius: 10px;height: 20px;transform-origin: bottom;top: -10px;width: 7px;
}
.blacksmith .head:after {transform: rotate(20deg);
}
.blacksmith .head:before {transform: rotate(-20deg);
} 

🤔 既然是胡子老头,肯定还需要眼睛和胡子的

<div class="head"><div class="moustache"></div><div class="moustache"></div><div class="eye"></div>
</div> 
  • 胡子就是两撇,和头发差不多的样式
.head .eye {position: absolute;background-color: #777a7a;box-shadow: 28px 0px 0px #777a7a;border-radius: 50%;height: 30px;left: 10px;top: 50px;width: 30px;
}
.head .eye:after, .head .eye:before {left: 50%;position: absolute;top: 50%;transform: translate(-50%, -50%);border: 5px solid #a0a0a0;border-radius: 50%;box-sizing: border-box;content: "";height: 100%;width: 100%;
}
.head .eye:before {left: 43px;
}
.head .moustache {position: absolute;background-color: #777a7a;height: 30px;top: 70px;width: 35px;
}
.head .moustache:nth-child(1) {border-radius: 0 60%;left: 40px;
}
.head .moustache:nth-child(2) {border-radius: 60% 0;left: 5px;
} 

⭐ 还得让胡子老头动起来看看

  • 把上面的非背景的元素都用下面的标签给包裹起来,然后去写一个统一的动画样式
<div class="blacksmith"></div> 
.blacksmith {position: absolute;bottom: 0;height: 300px;left: 50%;transform-origin: center;transform: translateX(-50%) rotate(0);width: 300px;
} 

💡 给个动画让老头摇起来吧

.blacksmith {animation: blacksmith-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
}@keyframes blacksmith-anima {0% {transform: translateX(-50%) rotate(0);}50% {transform: translateX(-50%) rotate(-10deg);}
}
.arm-right {animation: arm-anima 1.5s infinite cubic-bezier(0.59, 0.01, 0.99, 0.22);
} 

右手抡锤

🤔 既然是打铁,那就得抡锤

<div class="arm-right"></div> 
.blacksmith .arm-right {position: absolute;background-color: #eab08c;border-radius: 50px;height: 170px;left: 230px;top: 60px;transform-origin: 30px 30px;transform: rotate(160deg);width: 60px;
}
.blacksmith .arm-right:after {position: absolute;background-color: #eab08c;border-radius: 50%;content: "";height: 80px;left: -10px;width: 80px;
} 
  • 手臂其实也是用各种圆角来画出来的。。毕竟是为了体现出Q萌的状态
<div class="hammer"></div> 
  • 锤子相对来说样式比较复杂一点,用了两个差不多的棍子形状和一个正方形砍掉一个角的样子去实现的
.blacksmith .arm-right .hammer {position: absolute;background-color: #444444;border-radius: 50% 0 0 0;height: 60px;left: -50px;top: 140px;transform: rotate(-30deg);width: 50px;z-index: 1;
}
.blacksmith .arm-right .hammer:after {content: "";position: absolute;background-color: #666666;border-radius: 10px;height: 10px;left: -5px;top: 52px;width: 60px;
}
.blacksmith .arm-right .hammer:before {content: "";position: absolute;top: 50%;transform: translateY(-50%);background-color: #666666;border-radius: 0 10px 10px 0;height: 10px;left: 100%;width: 30px;
} 

打铁台

🤔 打铁台的标签样式分为三个部分,也是用伪元素去添加的

<div class="anvil"></div> 
.anvil {left: 50%;position: absolute;transform: translateX(-50%);background-color: #444444;bottom: 25px;height: 50px;width: 120px;
}
.anvil:after {left: 50%;position: absolute;transform: translateX(-50%);content: "";border-color: transparent transparent #444 transparent;border-style: solid;border-width: 0 50px 60px 50px;bottom: -25px;height: 0;width: 0;
}
.anvil:before {left: 50%;position: absolute;transform: translateX(-50%);background-color: #666666;content: "";border-radius: 10px;height: 10px;width: 140px;
} 

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

代码编程
赞赏

相关文章

在用form 提交请求时,在请求处理完成后想要在JAVA后台设置返回信息状态展示到页面
深入探讨 Java 类加载器(转)
转载到QQ空间的js实现
web项目中参数传递乱码解决方法
tomcat 类加载时找不到class类文件
CRT工具远程Linux系统服务器的 命令