关于我抽不到月饼礼盒于是用代码做了一个（纯代码文本）

简单介绍

事情起因大概是一星期前我看到掘金的抽奖活动里突然有了月饼和榨汁机这几个东西，我看到月饼礼盒的那一刻可谓一见钟情，迅速把攒下来的20几万矿石全部氪进去了，当我信心满满的去开奖的时候结果：花擦！2包贴纸。这还不算完，上星期的bugfix挑战赛我忘记了没参加结果现在已经不能抽礼盒了！！！，于是乎我就化悲愤为力量做出了个这么个玩意出来，先展示一下效果

功能介绍

其实这也就是一个动态效果的demo，但是你对比一下官方发布的月饼盒的图片，你就说像不像吧！当然这里面的任何东西都是存代码实现出来的，没有任何图片，还是不错的吧。当然也只是为了安慰我抽不到月饼而幼小的心灵罢了QAQ

如何实现

这个东西大体可以分为3大部分：1.最外面的礼盒和他的盖子 2.里面分口味的小盒子和他的盖子 3.月饼本体。那么咱们就先去完成一大部分

盒子雏形

首先把大体的盒子框架搭建出来

 

 
1
2
3

这样大概就有了基本的嵌套模型了，那么接下来就是逐步用css去给他装饰一下

礼盒的盖子

上面的代码里标注了这个就是礼盒的盖子

 
1

那么接下来要做的就是先对这个礼盒的盖子上的色块进行区分

礼盒上的盖子色块繁多，所以我大致分为了7个板块：

 
1
2

盖子上的板块区分完毕了，那么就是需要填充每个板块的内容和用css进行优化了，这里我就不细节描述了，相信大家会css的基本用脚都能写出来。直接参考末尾的在线代码！

分口味的小盒子

类名为gift-box里面的4个div就是每个小盒子的div，上面也进行了标注，每个小盒子的盖子上我能看清的元素也就只有两个，一个是圆弧，一个是文字。

盒子上的颜色看的出来一点用的是渐变，具体是渐变的方式和方向就不得而知了。所以我的结论是盒子的渐变用to bottom，圆形的渐变用朝向中心位置的渐变，比如左上角的就用to right bottom

奶黄
流心

 
1
2
3

/*CSS*/
.gbb{border-right: 4px solid #956D18;border-bottom: 4px solid #956D18;background-image: linear-gradient(to bottom, #e3e3e3, #D0B148);
}
.gbb>div{left: 60px;top: 60px;background-image: linear-gradient(to right bottom, #ffffff, #D0B148);
} 
1
2
3
4
5

月饼

接下来就是重头戏，香喷喷的月饼！

·月·
zong qiu jie kuai le
 
1
2
3

/*CSS*/
.circle{width: 200px;height: 200px;border-radius: 50%;font-size: 20px;font-weight: bold;text-transform: uppercase;text-align: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
.circle span{position: absolute;left: 0;top: 0;right: 0;bottom: 0;
} 
1
2
3
4
5

// 要操作的元素
let circle=document.querySelectorAll('.circle');
for(let j=0;j

// 礼盒的盖子的点击动画
$('.lid').click(function (){$('.lid').css({transform: "translate(-50%, -50%) scale(1.2)",left: "-400px",opacity: '0'})
})

// 小盒子的点击
$(".gift-box>div").click(function (){$(this).css({left: "50%",top: "50%",right: "auto",bottom: "auto",transform: "translate(-50%, -50%) scale(1.5)",zIndex: '3'})setTimeout(() => {$(this).children('.gbb').animate({left: "-300px",}, 1000)}, 1000)
}) 
1
2
3
4
5
6
7