快过年了，我用CSS写了个红包～红红火火

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

看到好多题材大家都写了，小编有点不知道写啥了，后面就想起过年红包🧧 满满，红红火火的，多喜庆，然后小编就提笔描绘一翻了，愿你新年也能红红火火，盘满钵满哟～

1.红包的效果图

备注：主要是应用了animation的动画，css和html编写的效果。

2.绘制红包🧧 的图图

代码如下：

<div>
  <div class="box">
    <div class="open-money" />
    <div class="box-content" />
  </div>
</div>

然后我们再给它增添色彩，喜气洋洋：

.box {
  width: 150px;
  height: 280px;
  background-color: #c3211e;
  position: relative;
  margin-top: 100px;
  margin-left: 50px;
      .box-content{
        width: 150px;
        height: 280px;
        background-color: #c3211e;
        position: relative;
        z-index: 98;
     }
    .open-money {
      width: 150px;
      height: 60px;
      position: absolute;
      top: 0px;
      background-color: #d7262d;
      border-bottom-left-radius: 80px;
      border-bottom-right-radius: 80px;
      z-index: 99;
    }
}

到这里的时候，咱们就弄好了一个喜气洋洋的红包🧧了。

3.新年贺岁好意头

<div class="message">
  <span>虎</span>
  <span>年</span>
  <span>大</span>
  <span>吉</span>
</div>
<div class="year">
  <span>~~~</span>
  <span>2022</span>
  <span>~~~</span>
</div>

接下来就让它金光灿灿～

.message{
  span:nth-child(1){
    font-size: 45px;
    color: #ffdca0;
    position: absolute;
    top: 80px;
    left: 30px;
  }
  span:nth-child(2){
    font-size: 43px;
    color: #ffdca0;
    position: absolute;
    top: 98px;
    left: 68px;
  }
  span:nth-child(3){
    font-size: 43px;
    color: #ffdca0;
    position: absolute;
    top: 130px;
    left: 33px;
  }
  span:nth-child(4){
    font-size: 43px;
    color: #ffdca0;
    position: absolute;
    top: 136px;
    left: 70.5px;
  }
}
.year{
  font-size: 18px;
  color: #ffdca0;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60px;
}

到这里，我们就基本实现了一个喜气洋洋的🧧了。

4.锦上添花动画到，红包打开好钱财

animation: openBox 8s infinite;

@keyframes openBox {
  0% {
    transform: rotateX(0);
    transform-origin: center top;
  }
  40%,
  60% {
    transform: rotateX(180deg);
    transform-origin: center top;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: center top;
  }
}

说明：animation: openBox 8s infinite; 动画的效果主要用的是animation，有兴趣的童鞋可以学习了解一下。

5.写在最后的寄语

到这里，我们的喜气洋洋的红包就弄好了，如果有兴趣的童鞋还可以锦上添花，弄个大钞在上面随着动画的打开，然后大钞滑动出来的效果哦。如果你觉得不错，就点上你的赞👍，支持一下了～