灵感来源
情人节这天，我好友会收到她对象的礼物。一般这种节日我是不送实物礼品的，我会送几句心灵鸡汤小段子，做为精神上的慰藉。
但是，自从上次给她演示了前端技术之后，我感觉她对技术的热爱还挺高的。所以，我决定今年不送「鸡汤」了，就利用自身的技术能力，送一份看得见，摸不着的礼物，一份用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个小时没有理我了。
我好友的原话是这样的，虽说礼轻情意重，但是见过画饼充饥的，没见过画护肤品的。不仅没起到啥心理安慰，看的多了，蹭蹭的冒火。刚才喝咖啡的勺子让我掰断了两根，下班我去找你。
天气预报说今天有雨，不知道雨后天晴的彩虹和阳光，我还能有幸看到不。
