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

·  阅读 1599

查看源图像

PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛

正式开始

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

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

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

7V7aKe.gif

完整代码

<!DOCTYPE html>
<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>阖家欢乐</span></div>
</body>

</html>
复制代码
<!DOCTYPE html>
<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: '华文行楷', Arial, Lucida 'Grande', Tahoma, sans-serif;
      font-size: 3.2rem;
      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>
  <!-- 灯笼1 -->
  <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>

  <!-- 灯笼2 -->
  <div class="deng-box1">
    <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>

</html>
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改