Draw a lantern to welcome the 2022 Spring Festival 🏮 Bless you

PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”

The official start of the

Now, before we start drawing, let’s do something a little bit simpler, get our hands dirty.

How do you think HTML should be written? Three parts? No, no, no, one is enough.

<div>
    <span>A happy family</span>
</div>
Copy the code

Basic width, height, color, let’s do one

div {
      height: 100px;
      width: 100px;
      border: solid 1px #f00;
      border-radius: 30px;
      box-shadow: 0px 0px 206px 34px rgba(250.108.0.1);
      background-color: #f00;
}
Copy the code

How do you draw elements without adding HTML? Pseudo elements.

div:before {
      height: 20px;
      width: 60px;
      background-color: # 000;
      content: "";
      display: block;
      margin-top: -21px;
      border-radius: 5px;
      margin-left: 20px;
      border: solid 1px # 333;
}

div:after {
      display: block;
      border: solid 1px # 333;
      height: 20px;
      width: 60px;
      background-color: # 000;
      content: "";
      margin-left: 20px;
      border-radius: 5px;
}
Copy the code

Ok, just a little bit. Now, using text, open the box. Just a little bit more detail

span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      background-color: #ff0;
      box-shadow: inset 0px 0px 70px 34px rgba(250.0.0.1);
      text-align: center;
      padding-top: 50%;
      color: orange;
      font-family: "Microsoft Yahei";
}
Copy the code

Then, add the animation

 @keyframes swing {
      0% {
        transform: rotate(-10deg)}50% {
        transform: rotate(10deg)}100% {
        transform: rotate(-10deg)}}Copy the code

div {
      animation: swing 3s infinite ease-in-out;
}
Copy the code

Strange not? This is… What the hell?

Transform rotate around the center.

Use transform-origin to change the center point.

 div {
      animation: swing 3s infinite ease-in-out;
      transform-origin: 50% -100px;
}
Copy the code

Perfect.

Let’s look at our requirements.

In general, it can be divided into four parts, so that our HTML structure is roughly out.

<div class="deng-box">
    <div class="deng">
      <div class="xian"></div>
      <div class="deng-a">
        <div class="deng-b">
          <div class="deng-t"></div>
        </div>
      </div>
      <div class="shui shui-a">
        <div class="shui-c"></div>
        <div class="shui-b"></div>
      </div>
    </div>
</div>
Copy the code

I’m starting to draw.

I’m going to make the background black

body {
      background: # 000;
}
Copy the code

Set the size, width, height and color for the red body

.deng {
      position: relative;
      width: 120px;
      height: 90px;
      margin: 50px;
      background: #d8000f;
      border-radius: 50%;
}
Copy the code

Draw suspension line

.xian {
      position: absolute;
      top: -20px;
      left: 60px;
      width: 2px;
      height: 20px;
      background: #dc8f03;
}
Copy the code

But this is too stiff, we want to have a hazy feeling

.deng {
      //...
      box-shadow: -5px 5px 50px 4px rgba(250.108.0.1);
}
Copy the code

It feels so bare in the middle. Oh, there are two things missing.

Add fake elements to our lanterns

.deng:before {
      position: absolute;
      top: -7px;
      left: 29px;
      height: 12px;
      width: 60px;
      content: "";
      display: block;
      z-index: 999;
      border-radius: 5px 5px 0 0;
      border: solid 1px #dc8f03;
      background: #ffa500;
      background: linear-gradient(to right, #dc8f03.#ffa500.#dc8f03.#ffa500.#dc8f03);
}

.deng:after {
      position: absolute;
      bottom: -7px;
      left: 10px;
      height: 12px;
      width: 60px;
      content: "";
      display: block;
      margin-left: 20px;
      border-radius: 0 0 5px 5px;
      border: solid 1px #dc8f03;
      background: #ffa500;
      background: linear-gradient(to right, #dc8f03.#ffa500.#dc8f03.#ffa500.#dc8f03);
}
Copy the code

The middle part is still very empty, so add some decoration.

.deng-a {
      width: 100px;
      height: 90px;
      background: #d8000f;
      margin: 12px 8px 8px 8px;
      border-radius: 50%;
      border: 2px solid #dc8f03;
}
Copy the code

Add one

.deng-b {
      width: 45px;
      height: 90px;
      background: #d8000f;
      margin: -4px 8px 8px 26px;
      border-radius: 50%;
      border: 2px solid #dc8f03;
}
Copy the code

The following part

.shui-a {
      position: relative;
      width: 5px;
      height: 20px;
      margin: -5px 0 0 59px;
      background: #ffa500;
      border-radius: 0 0 5px 5px;
}
Copy the code

Draw another little circle

.shui-b {
      position: absolute;
      top: 14px;
      left: -2px;
      width: 10px;
      height: 10px;
      background: #dc8f03;
      border-radius: 50%;
}
Copy the code

Let me draw a longer one

.shui-c {
      position: absolute;
      top: 18px;
      left: -2px;
      width: 10px;
      height: 35px;
      background: #ffa500;
      border-radius: 0 0 0 5px;
}
Copy the code

Is there that taste ～～～～

Generally speaking, lanterns have characters in the middle, so let’s add one

It’s so ugly, we need to touch it up

.deng-t {
      font-family: 'Chinese Script', Arial, Lucida 'Grande', Tahoma, sans-serif;
      color: #dc8f03;
      font-weight: bold;
      line-height: 85px;
      text-align: center;
}
Copy the code

Almost done. The lantern is ready to move.

@keyframes swing {
      0% {
        transform: rotate(-10deg)}50% {
        transform: rotate(10deg)}100% {
        transform: rotate(-10deg)}}Copy the code

Add to our lights

.deng {
     //...
     animation: swing 3s infinite ease-in-out;
}
Copy the code

transform-origin: 50% -100px;
Copy the code

It still feels weird. Well, the spike side is still stiff. Add a motion effect

.shui-a{/ /...animation: swing 4s infinite ease-in-out;
      transform-origin: 50% -45px;
}
Copy the code

Change the position and add another lantern. Finally, let’s see what happens.

The complete code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      padding: 25% 30%;
      background-color: # 000;
    }

    div {
      height: 100px;
      width: 100px;
      border: solid 1px #f00;
      border-radius: 30px;
      box-shadow: 0px 0px 206px 34px rgba(250.108.0.1);
      background-color: #f00;
    }

    div:before {
      height: 20px;
      width: 60px;
      background-color: # 000;
      content: "";
      display: block;
      margin-top: -21px;
      border-radius: 5px;
      margin-left: 20px;
      border: solid 1px # 333;
    }

    div:after {
      display: block;
      border: solid 1px # 333;
      height: 20px;
      width: 60px;
      background-color: # 000;
      content: "";
      margin-left: 20px;
      border-radius: 5px;
    }

    span {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 30px;
      background-color: #ff0;
      box-shadow: inset 0px 0px 70px 34px rgba(250.0.0.1);
      text-align: center;
      padding-top: 50%;
      color: orange;
      font-family: "Microsoft Yahei";
    }

    div {
      animation: swing 3s infinite ease-in-out;
      transform-origin: 50% -100px;
    }

    @keyframes swing {
      0% {
        transform: rotate(-10deg)}50% {
        transform: rotate(10deg)}100% {
        transform: rotate(-10deg)}}</style>
</head>

<body>
  <div><span>A happy family</span></div>
</body>

</html>
Copy the code

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    body {
      background: # 000;
    }

    .deng-box {
      position: fixed;
      top: -40px;
      right: -20px;
      z-index: 999;
    }

    .deng-box1 {
      position: fixed;
      top: -30px;
      right: 10px;
      z-index: 999;
    }

    .deng-box1 .deng {
      position: relative;
      width: 120px;
      height: 90px;
      margin: 50px;
      background: #d8000f;
      border-radius: 50% 50%;
      transform-origin: 50% -100px;
      animation: swing 5s infinite ease-in-out;
      box-shadow: -5px 5px 30px 4px rgba(252.144.61.1);
    }

    .deng {
      position: relative;
      width: 120px;
      height: 90px;
      margin: 50px;
      background: #d8000f;
      border-radius: 50%;
      transform-origin: 50% -100px;
      animation: swing 3s infinite ease-in-out;
      box-shadow: -5px 5px 50px 4px rgba(250.108.0.1);
    }

    .deng-a {
      width: 100px;
      height: 90px;
      background: #d8000f;
      margin: 12px 8px 8px 8px;
      border-radius: 50% 50%;
      border: 2px solid #dc8f03;
    }

    .deng-b {
      width: 45px;
      height: 90px;
      background: #d8000f;
      margin: -4px 8px 8px 26px;
      border-radius: 50% 50%;
      border: 2px solid #dc8f03;
    }

    .xian {
      position: absolute;
      top: -20px;
      left: 60px;
      width: 2px;
      height: 20px;
      background: #dc8f03;
    }

    .shui-a {
      position: relative;
      width: 5px;
      height: 20px;
      margin: -5px 0 0 59px;
      animation: swing 4s infinite ease-in-out;
      transform-origin: 50% -45px;
      background: #ffa500;
      border-radius: 0 0 5px 5px;
    }

    .shui-b {
      position: absolute;
      top: 14px;
      left: -2px;
      width: 10px;
      height: 10px;
      background: #dc8f03;
      border-radius: 50%;
    }

    .shui-c {
      position: absolute;
      top: 18px;
      left: -2px;
      width: 10px;
      height: 35px;
      background: #ffa500;
      border-radius: 0 0 0 5px;
    }

    .deng:before {
      position: absolute;
      top: -7px;
      left: 29px;
      height: 12px;
      width: 60px;
      content: "";
      display: block;
      z-index: 999;
      border-radius: 5px 5px 0 0;
      border: solid 1px #dc8f03;
      background: #ffa500;
      background: linear-gradient(to right, #dc8f03.#ffa500.#dc8f03.#ffa500.#dc8f03);
    }

    .deng:after {
      position: absolute;
      bottom: -7px;
      left: 10px;
      height: 12px;
      width: 60px;
      content: "";
      display: block;
      margin-left: 20px;
      border-radius: 0 0 5px 5px;
      border: solid 1px #dc8f03;
      background: #ffa500;
      background: linear-gradient(to right, #dc8f03.#ffa500.#dc8f03.#ffa500.#dc8f03);
    }

    .deng-t {
      font-family: 'Chinese Script', Arial, Lucida 'Grande', Tahoma, sans-serif;
      font-size: 3.2 rem;
      color: #dc8f03;
      font-weight: bold;
      line-height: 85px;
      text-align: center;
    }

    @keyframes swing {
      0% {
        transform: rotate(-10deg)}50% {
        transform: rotate(10deg)}100% {
        transform: rotate(-10deg)}}</style>
</head>

<body>
  <! -- Lantern 1 -->
  <div class="deng-box">
    <div class="deng">
      <div class="xian"></div>
      <div class="deng-a">
        <div class="deng-b">
          <div class="deng-t">The lamp</div>
        </div>
      </div>
      <div class="shui shui-a">
        <div class="shui-c"></div>
        <div class="shui-b"></div>
      </div>
    </div>
  </div>

  <! -- Lantern 2 -->
  <div class="deng-box1">
    <div class="deng">
      <div class="xian"></div>
      <div class="deng-a">
        <div class="deng-b">
          <div class="deng-t">In the spring</div>
        </div>
      </div>
      <div class="shui shui-a">
        <div class="shui-c"></div>
        <div class="shui-b"></div>
      </div>
    </div>
  </div>
</body>

</html>
Copy the code

Draw a lantern to welcome the 2022 Spring Festival 🏮 Bless you

The official start of the

Related Posts

Electron pseudo-protocol parameters are obtained

H5 page in the browser is good, mobile phone turned off and can not see the error message how to do?

Wechat applet realizes navigation function