【加载中...】打铁要趁热，页面请稍等

蜡笔小心_
2,242 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

前言

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

image.png

打铁匠的身体

🤔 为了显示的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%;
}

image.png

🤔 给身体加些点缀（穿个背带裤？？）

<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;
}

image.png

胡子老头

🤔 一个长胡子的老头应该是啥样的呢？怎样让他看起来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;
}

📌 再用before和after两个伪元素加点头发吧，同时做点旋转角度即可

.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);
}

image.png

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

<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;
}

image.png

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

  • 把上面的非背景的元素都用下面的标签给包裹起来，然后去写一个统一的动画样式
<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);
}

1.gif

右手抡锤

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

<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;
}

2.gif

打铁台

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

<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;
}

3.gif

码上掘金看一看

总结

本篇文章主要是巩固了CSS样式中的伪类元素的使用方法，大家可以多联系一下，用css可以画出各种形状的东西哦。

avatar
文章
阅读
粉丝