灵感来源

情人节这天，我好友会收到她对象的礼物。一般这种节日我是不送实物礼品的，我会送几句心灵鸡汤小段子，做为精神上的慰藉。

但是，自从上次给她演示了前端技术之后，我感觉她对技术的热爱还挺高的。所以，我决定今年不送「鸡汤」了，就利用自身的技术能力，送一份看得见，摸不着的礼物，一份用CSS实现礼盒。

在线体验

在线预览平台，可查看完整代码，并体验效果。

礼盒

这份礼盒包括外层的盒子和内层的礼物。

外层的盒子

• 礼盒外层上礼品的名字是居中的；
• 包含两条缎带，横线的和纵向的；
• 缎带交叉点有一颗心形的装饰；
• 盒子上的闪光效果，主要是为了增加趣味性和表现盒子的光亮感。我设计了一个倾斜的矩形从屏幕上方移动到下方，因为矩形是倾斜的，所以从盒子另一端消失时，移动距离要超过100%；
• 点击盒子，盒子会逐渐消失，然后显现出内层的礼物。

.box-lid .box-lid-light {
width: 20px;
height: 600px;
background: #e2f0d8;position: absolute;
top: -50px;
left: -23px;
transform: rotate(30deg);
opacity: 0.3;
animation: boxLidlight4sinfinite;
}
@keyframesboxLidlight {
100% {
left: 140%;
  }
}

内层的礼物

• 内层通过四个边框，可以让内层稍微有凹陷感，展现盒子的深度；
• 一共两个瓶子，面霜和眼霜，懂得都懂，这俩一般挺贵的；
• 瓶子中间的横线，将瓶子分割成瓶盖和瓶身两部分；
• 其中，眼霜瓶体的磨砂感是通过CSS3 filter(滤镜) 属性实现的。

.eye-cream-bottle1 {
position: absolute;
background: #d4d9c3;width: 124px;
height: 80px;
border-radius: 5px10px;
top: 5px;
right: 5px;
-webkit-filter: blur(13px);
filter: blur(13px);
}

后续

但凡兜里宽绰点，都不要学我。我把线上预览的地址发过去之后，我好友已经3个小时没有理我了。

我好友的原话是这样的，虽说礼轻情意重，但是见过画饼充饥的，没见过画护肤品的。不仅没起到啥心理安慰，看的多了，蹭蹭的冒火。刚才喝咖啡的勺子让我掰断了两根，下班我去找你。

天气预报说今天有雨，不知道雨后天晴的彩虹和阳光，我还能有幸看到不。