我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

简单介绍

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

功能介绍

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

如何实现

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

盒子雏形

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

<!-- 礼盒的整体 -->
<div class="gift">
    <!-- 礼盒的盖子 -->
    <div class="lid"></div>
     <!-- 礼盒放小盒子的box -->
    <div class="gift-box">
        <!-- 分口味的小盒子整体 -->
        <div>
            <!-- 小盒子的盖子 -->
            <div class="gbb"></div>
            <!-- 盒子中的月饼 -->
            <div class="moon-cake"></div>
        </div>
        <div>
            <div class="gbb"></div>
            <div class="moon-cake"></div>
        </div>
        <div>
            <div class="gbb"></div>
            <div class="moon-cake"></div>
        </div>
        <div>
            <div class="gbb"></div>
            <div class="moon-cake"></div>
        </div>
    </div>
</div>

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

礼盒的盖子

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

<div class="lid"></div>

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

礼盒上的盖子色块繁多，所以我大致分为了7个板块：每个色块都要创建一个小盒子，里面的东西，用浮动或定位去排列他，当然你直接换成ulli也没问题

<div class="lid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

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

这就是我完成之后的礼盒盖子的样式，emmm看那张模糊的图片也就只能达到这个效果了。

分口味的小盒子

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

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

<!--HTML-->
<div>
    <div class="gbb">
        <!--盖子上的文字-->
        <p>
            奶黄<br>
            流心
        </p>
        <!--盖子上的圆弧-->
        <div></div>
    </div>
    <div class="moon-cake">
    </div>
</div>

/*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);
}

做出来就是这种效果喽！

月饼

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

很显然可以看出这是由外面围着一圈的字，里面一个圆环，然后一个月字旁边有两个点组合成的（画的有点抽象，能看明白意思就行）

这里其实最重要的就是字围效果，所以这里就只重点放出来字围效果相关的代码：那么能想到的就是已知的css暂时没有办法按照需求来完成这种弧度的字围，所以这里我得用js里面去动态渲染一下文字，把文字设置好角度一个一个添加进去

<!--HTML-->
<div class="moon-cake yellow">
    <span>·月·</span>
    <!--圆环-->
    <div class="huan"></div>
    <!--字围效果-->
    <div class="circle">zong qiu jie kuai le</div>
</div>

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

// 要操作的元素
let circle=document.querySelectorAll('.circle');
for(let j=0;j<circle.length;j++){
    let text=circle[j].innerText;
    circle[j].innerText='';
    for(let i=0;i<text.length;i++){
        // 循环文本，取出单字
        let letter=text[i];
        // 创建span元素，并把单字赋给span
        let span=document.createElement('span');
        span.innerText=letter;
        // 计算每一个字的旋转角度
        let r=(360/text.length)*i;
        // 设置span的旋转角度
        span.style.transform='rotate('+r+'deg)';
        // 追加span
        circle[j].appendChild(span);
    }
}

当当！最终效果就是这样喽，但是与其说是月饼。。。我觉得说是下水道井盖比较合适QAQ，也不知道问题出在哪了希望评论区能给点意见（对不起掘金辛苦设计月饼的大佬们）

动态效果

最后就是动态效果的组装

// 礼盒的盖子的点击动画
$('.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)
})

然后就是最一开始gif动画展示出来的总体效果啦！所有代码以在线代码的方式放出来

如果大家喜欢的话，请为我的文章点点关注点点赞，瑞斯败！jxm

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