喜迎2022新春之画个灯笼🏮祝福你

2,119 阅读3分钟

基础结构

正式开始绘制之前呢,咱们先来个简单点的,练练手。

Jan-07-2022 21-07-25.gif

你觉得 HTML 应该怎么写?三个部分?不不不,一个就够了。

<div>
    <span>阖家欢乐</span>
</div>

最基本的宽高,颜色,来一个

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

怎么在不增加 HTML 的情况下绘制出元素呢?伪元素。

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

image-20220107211156192.png

ok,有那么一点点感觉了,接下来,使用文字,撑开盒子。再加那么一点点小细节

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

图片.png

然后,添加动画

 @keyframes swing {
      0% {
        transform: rotate(-10deg)
      }

      50% {
        transform: rotate(10deg)
      }

      100% {
        transform: rotate(-10deg)
      }
}
div {
      animation: swing 3s infinite ease-in-out;
}

7V5MkV.gif

奇怪不?这。。。什么鬼?

transform 围绕中心进行 rotate 的。

使用 transform-origin 来改变中心点。

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

7V5r1e.gif

完美。

再来看看我们的需求。

查看源图像

大体呢,可以分为四个部分,这样呢,我们的 HTML 结构也就大概出来了。

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

开始绘制了。

先把背景置为黑色

body {
      background: #000;
}

为红色主体设置大小宽高和颜色

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

图片.png

绘制悬挂线

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

图片.png

但是这样太生硬了,我们希望有一种朦胧的感觉

.deng {
      //...
      box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}

图片.png

怎么感觉中间光秃秃的,喔,原来少了上下两个东西。

为我们的灯笼加上伪元素

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

图片.png

中间的部分还是很空呀,那就加上一些装饰吧。

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

图片.png

再加一个

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

图片.png

下面的部分

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

图片.png

再画一个小圆圈

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

图片.png

再画一个长一点的

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

图片.png

是不是有那味了~~~~

一般来说,灯笼的中间都是有字的,那我们也加一个

图片.png

这个太丑了,我们需要修饰一下

.deng-t {
      font-family: '华文行楷', Arial, Lucida 'Grande', Tahoma, sans-serif;
      color: #dc8f03;
      font-weight: bold;
      line-height: 85px;
      text-align: center;
}

图片.png

差不多了,灯笼可以动了。

@keyframes swing {
      0% {
        transform: rotate(-10deg)
      }

      50% {
        transform: rotate(10deg)
      }

      100% {
        transform: rotate(-10deg)
      }
}

给我们的灯加上

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

7VTqHA.gif

transform-origin: 50% -100px;

7V7MDJ.gif

还是感觉怪怪的,嗯,灯穗那边还是很生硬,加个动效吧

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

7V7gxS.gif

改变一下位置,再多加一个灯笼。最后,来看看效果吧。