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

前端老实人

发布于 2022-1-17 16:14

1.8w浏览

1收藏

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

这一年又要过去了，这不马上过年了嘛，寻思给大家准备点礼物，程序员的礼物当然要有程序员的特征，下面我为大家写了个礼盒，但是我不展示礼盒里面是什么东西，注意看礼盒里面还有东西在动哦~哈哈，需要同学们自己动手写完之后才能知道我送的是什么礼物
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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

页面样式

初始化：

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

整体位置和大小：

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

 .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);
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

这是横竖的封条

.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);
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

这是礼盒盖子

 .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);
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

这是盖子上的蝴蝶结

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

开始画礼盒里面的礼物

  .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;
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.

最后添加动画就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);
    }
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.

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

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

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

寄语

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

分类

标签

已于2022-1-19 11:01:38修改

51CTO

51CTO博客

51CTO学堂

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

页面结构

页面样式

初始化：

整体位置和大小：

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

这是横竖的封条

这是礼盒盖子

这是盖子上的蝴蝶结

开始画礼盒里面的礼物

最后添加动画就ok

寄语

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

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

页面结构

页面样式

初始化：

整体位置和大小：

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

这是横竖的封条

这是礼盒盖子

这是盖子上的蝴蝶结

开始画礼盒里面的礼物

最后添加动画就ok

寄语

目录

订阅鸿蒙技术特刊，精选内容抢先看

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