html+css写一个新春礼盒，专属你的礼物快来打开看看 原创 精华

春节不停更，此文正在参加「星光计划-春节更帖活动」
忽如一夜春风来，千树万树梨花开。

这一年又要过去了，这不马上过年了嘛，寻思给大家准备点礼物，程序员的礼物当然要有程序员的特征，下面我为大家写了个礼盒，但是我不展示礼盒里面是什么东西，注意看礼盒里面还有东西在动哦~哈哈，需要同学们自己动手写完之后才能知道我送的是什么礼物

页面结构

这里不用我多说了吧？html还让我解释我直接吐血了都。

<div class="present" ontouchstart="ontouchstart">
    <div class="santa">
      <div class="santa__hat"></div>
      <div class="santa__eyes"></div>
      <div class="santa__beard">
        <div class="santa__beard--cover"></div>
      </div>
      <div class="santa__smile"></div>
    </div>
    <div class="present__box">
      <div class="present__ribbon--vertical"></div>
      <div class="present__ribbon--horizontal"></div>
    </div>
    <div class="present__top">
      <div class="present__ribbon--vertical"></div>
      <div class="present__bow"></div>
    </div>
  </div>

页面样式

初始化：

  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100vh;
    background-color: #1e2f27;
  }

整体位置和大小：

 .present {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    margin-top: 10vw;
    width: 30vw;
    height: 25vw;
  }

下面我们写红色的盒子，以及圆角

 .present__box {
    background-color: #FE4365;
    background-image: -webkit-repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    background-image: repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0.5vw 0.5vw;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
  }

这是横竖的封条

.present__ribbon--horizontal,
  .present__ribbon--vetical {
    content: "";
    position: absolute;
    margin: auto;
    background-color: #F9CDAD;
  }

  .present__ribbon--vertical {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5vw;
    height: 100%;
    background-color: #F9CDAD;
    background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
    box-shadow: inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.1);
  }

  .present__ribbon--horizontal {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1);
  }

这是礼盒盖子

 .present__top {
    background-color: #FE4365;
    background-image: -webkit-repeating-linear-gradient(135deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    background-image: repeating-linear-gradient(-45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
    position: absolute;
    top: 0;
    left: -1%;
    width: 102%;
    height: 20%;
    border-radius: 0.5vw 0.5vw 0 0;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
  }

  .present__bow {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin: auto;
    width: 30%;
    height: 40%;
    background-color: #83AF9B;
    border-radius: 2px 2px 0 0;
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
  }

这是盖子上的蝴蝶结

 .present__bow:before,
  .present__bow:after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 70%;
    height: 150%;
    background-color: inherit;
    border-radius: 2px;
    z-index: -1;
  }

  .present__bow:before {
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1);
  }

  .present__bow:after {
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
  }

开始画礼盒里面的礼物

  .santa {
    position: absolute;
    right: 0;
    bottom: 90%;
    left: 0;
    margin: auto;
    width: 60%;
    background-color: #E1B899;
    border-radius: 100%;
  }

  .santa:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  .santa__eyes {
    position: absolute;
    top: 35%;
    width: 100%;
    height: 100%;
  }

  .santa__eyes:before,
  .santa__eyes:after {
    content: "";
    position: absolute;
    width: 1.4vw;
    height: 1.4vw;
    background-color: #111111;
    border-radius: 100%;
  }

  .santa__eyes:before {
    left: 30%;
  }

  .santa__eyes:after {
    right: 30%;
  }

  .santa__beard {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 50%;
    background-color: white;
    border-radius: 0 0 4vw 4vw;
  }

  .santa__beard:before,
  .santa__beard:after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 15%;
    height: 25%;
    background-color: inherit;
  }

  .santa__beard:before {
    left: 0;
    border-radius: 0 4vw 0 0;
  }

  .santa__beard:after {
    right: 0;
    border-radius: 4vw 0 0 0;
  }

  .santa__beard--cover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 70%;
    height: 50%;
    background-color: #E1B899;
    border-radius: 0 0 2vw 2vw;
  }

  .santa__beard--cover:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius: 1vw 1vw 0 0;
  }

  .santa__smile {
    position: absolute;
    right: 0;
    bottom: 30%;
    left: 0;
    margin: auto;
    width: 15%;
    height: 20%;
    background-color: #111111;
    border-radius: 4vw;
  }

  .santa__smile:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
  }

最后添加动画就ok

.present {
    -webkit-animation: shake 5s ease-in-out infinite;
    animation: shake 5s ease-in-out infinite;
  }

  .present__top {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
  }

  .santa {
    -webkit-transform: translateY(17vw);
    transform: translateY(17vw);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
  }

  .present:hover {
    -webkit-animation: none;
    animation: none;
  }

  .present:hover .santa {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.1s ease-out;
    transition: -webkit-transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
  }

  .present:hover .present__top {
    -webkit-transform: translateY(-17vw);
    transform: translateY(-17vw);
    -webkit-animation: pop-the-top 0.4s ease-in;
    animation: pop-the-top 0.4s ease-in;
  }

  @-webkit-keyframes pop-the-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(-24vw);
      transform: translateY(-24vw);
    }

    60% {
      -webkit-transform: translateY(-16vw);
      transform: translateY(-16vw);
    }

    75% {
      -webkit-transform: translateY(-18vw);
      transform: translateY(-18vw);
    }

    90%,
    100% {
      -webkit-transform: translateY(-17vw);
      transform: translateY(-17vw);
    }
  }

  @keyframes pop-the-top {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    30% {
      -webkit-transform: translateY(-24vw);
      transform: translateY(-24vw);
    }

    60% {
      -webkit-transform: translateY(-16vw);
      transform: translateY(-16vw);
    }

    75% {
      -webkit-transform: translateY(-18vw);
      transform: translateY(-18vw);
    }

    90%,
    100% {
      -webkit-transform: translateY(-17vw);
      transform: translateY(-17vw);
    }
  }

  @-webkit-keyframes shake {
    52% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    54% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    56% {
      -webkit-transform: translateX(-0.5vw);
      transform: translateX(-0.5vw);
    }

    58% {
      -webkit-transform: translateX(0.5vw);
      transform: translateX(0.5vw);
    }

    60% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    62% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    64% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes shake {
    52% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    54% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    56% {
      -webkit-transform: translateX(-0.5vw);
      transform: translateX(-0.5vw);
    }

    58% {
      -webkit-transform: translateX(0.5vw);
      transform: translateX(0.5vw);
    }

    60% {
      -webkit-transform: translateX(-0.2vw);
      transform: translateX(-0.2vw);
    }

    62% {
      -webkit-transform: translateX(0.2vw);
      transform: translateX(0.2vw);
    }

    64% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

我这样写你明白了么？总的来说内容不是太难，总共也没几个html标签，主要是css样式，有些样式不理解的话可以查一下，我写的这些元素还算是比较常用的。

再有就是：如果写不出来的话就复制到你代码里瞅瞅我给你的什么礼物吧~

礼物我就先送为敬了，👍/收藏/关注就交给你喽。
有不懂的可以私信哦~

寄语

注意了，先看看你的左边，再看看你的右边。请小心一个刚溜出来的精神病，他的特征是：拿着手机东张西望。祝你新年快乐哦😂~