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

我和嫣嫣的故事

我加入读书圈之后，认识了嫣嫣，志相同道相合，我戏称我俩是灵魂伴侣。

嫣嫣庆生，发挥我的专长，给她准备了一份礼物🎁。

我分析了一下我的专长。

写故事、写话本📚，想想最近喜欢的题材，果断放弃。
推荐中华美食🍲、八大菜系，看不见摸不着。
安利国漫🌕，想想更新频率，春去秋来，一集等一年。
那就只剩下最后一项，写代码我是专业的。✨

送礼物🎁，我是认真的

蛋糕？自画像？一首小诗？天上的星星？

小孩子才做选择，成年人直接梭哈。

配色🎨

我之前有篇文章介绍了我从网上借鉴的配色，嫣嫣看了说很喜欢天青色和黄栗色。

所以整体颜色搭配选择了天青色和黄栗色。

功能介绍

功能类型	功能描述
切换按钮	1、点击按钮可以切换摆件展示内容。2、展示的效果采用的渐现动画。
蛋糕🎂	1、三层蛋糕。2、蛋糕上有蜡烛。3、每层蛋糕的装饰不同。4、蛋糕底部加了一层雕花。
㊗️福	1、左侧是一副壮(简)丽(笔)山河图。2、上河图上的一排大雁正在高飞。3、右侧是我写的两句祝福诗，藏头又藏尾。
礼物🎁	1、紫禁星夜是故宫文创的创意。2、鼠标经过时，齿轮可以顺时针转动。3、六角形也有鼠标经过效果，沿着Y轴顺时针转动。

上效果

在线查看

PC端体验更佳，因为部分图案有鼠标经过的效果。

蛋糕🎂·许个愿吧

这个三层大蛋糕实现并不难，就是有点费眼。尤其底部的一排圆圈雕花，需要有弧度。（请珍惜身边每一个前端）

蛋糕上的火苗🔥

仔细看，火苗🔥，正在富有激情的跳动，等待寿星许愿。

这个跳动效果是通过变换火苗的形状实现的。
外层的光晕效果，是因为为元素设置了滤镜属性的高斯模糊值。

.flames {
  position: absolute;
  width: 8px;
  height: 12px;
  border: 2px solid #ffe8b0;
  border-radius: 0 100% 100% 100%;
  left: 142px;
  top: 13px;
  transform: rotate(45deg);
  animation: part1Flames 1.5s linear infinite;
}
@keyframes part1Flames {
  0% {
    height: 12px;
    top: 13px;
  }
  12% {
    height: 14px;
    width: 10px;
    top: 11px;
  }
  24% {
    height: 12px;
    top: 13px;
  }
  36% {
    height: 16px;
    width: 10px;
    top: 9px;
  }
  100% {
    height: 12px;
    top: 13px;
  }
}
.flames-halo {
  background: #fcb959;
  width: 14px;
  height: 14px;
  border-radius: 0 100% 100% 100%;
  position: absolute;
  top: -2px;
  z-index: -2;
  filter: blur(8px);
  transform: scale(1.4);
  left: -5px;
}

㊗️福·为你写诗

藏头藏尾诗

影斜日低光消快，

嫣然如梦庆生乐。

藏头又藏尾，好创意，又有好寓意。㊗️我嫣天天快乐。

诗文外层的边框，我取了个巧，用的之前双色莲花图里的边框，直接进行了等比缩小。

山河图卷

这个图案的创意源于我俩都喜欢读书，喜欢历史。所以才想到送给她一副山河图卷⛰️。

山川

山川其实是一个带圆角的矩形，先选择45度，然后将下半部分遮住就可以了。

.mountain {
  background: #ffe8b0;
  position: absolute;
  transform: rotate(45deg);
}
.mountain::before {
  content: '';
  background: #fedc5e;
  position: absolute;
  top: 0px;
  z-index: 119;
  transform: rotate(45deg);
}
.mountain1 {
  width: 40px;
  height: 40px;
  top: 160px;
  left: 40px;
  border-radius: 10px;
}
.mountain1::before {
  width: 30px;
  height: 60px;
  left: 10px;
}

一排大雁

鸿雁南飞，希望把我的思念和祝福带到嫣嫣身边。

翅膀闪动的效果，通过移动实现。

.part2 .dayan::before {
  transform: rotate(-50deg);
  left: 0;
  animation: dayanLeft 1.5s linear infinite;
}
.part2 .dayan::after {
  transform: rotate(50deg);
  left: 7px;
  animation: dayanRight 1.5s linear infinite;
}
@keyframes dayanLeft {
  0% {
    transform: rotate(-50deg);
  }
  25% {
    transform: rotate(-20deg);
    left: 2px;
  }
  50% {
    transform: rotate(-50deg);
  }
  75% {
    transform: rotate(-80deg);
  }
  100% {
    transform: rotate(-50deg);
  }
}
@keyframes dayanRight {
  0% {
    transform: rotate(50deg);
  }
  25% {
    transform: rotate(20deg);
    left: 6px;
  }
  50% {
    transform: rotate(50deg);
  }
  75% {
    transform: rotate(80deg);
    left: 8px;
  }
  100% {
    transform: rotate(50deg);
  }
}

礼物🎁·紫禁星夜🌌

想要什么礼物？

如果她想要天上的星星呢？

当然是摘给她。

六角星怎么实现？

两个对立方向的三角形，重叠，每个三角形三个角，两个就是六个角，完美。

两个三角形，一个元素即可，伪元素了解下。

还给它加了一个鼠标经过旋转的效果。

.star-diamond {
  width: 0px;
  height: 0px;
  border-bottom: 100px solid #f5ca4a;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  position: absolute;
  left: 72px;
  top: 64px;
  cursor: pointer;
  z-index: 399;
}
.star-diamond:after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 100px solid #f5ca4a;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  position: absolute;
  top: 34px;
  left: -62px;
}
.star-diamond:hover {
  animation: starGroup 2s linear infinite;
}
@keyframes starGroup {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

缘分齿轮

感谢缘分的齿轮让我们相遇。

不过齿轮上的虚线，真是个精细活，每一个旋转的角度都不同。不过效果真不错，挺好看的。

鼠标经过的时候，还能转动，就问妙不妙。

.star-line-box {
  width: 230px;
  height: 230px;
  border-radius: 100%;
  position: absolute;
  top: 14px;
  left: 14px;
  border: 1px solid #9dcbfe;
  background: #1d203f;
}
.star-line-box:hover {
  animation: starLineBox 6s linear infinite;
}
@keyframes starLineBox {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

彩蛋

不放彩蛋好像不是叶一一的风格，码上掘金中没有加提示，但是这个摆件确实是可以点亮的。

这个摆件的基座上有我嫣的名字全拼，大写的，点击可以点亮摆件图案。

点亮功能也很简单，只需要当前摆件的图案的背景颜色就行。

.part1.active .cake {
  border: 3px solid #f9f8fd;
}
.part1.active .flames-halo,
.part1.active .cake-heart:before,
.part1.active .cake-heart:after,
.part1.active .cake-heart {
  background: #f9f8fd;
}
.part1.active .flames,
.part1.active .candle,
.part1.active .cake-stack::before,
.part1.active .cake-stack::after,
.part1.active .cake-decorate-circle,
.part1.active .cake-circle,
.part1.active .cake-stack {
  border: 2px solid #f9f8fd;
}

叮，你有一份礼物🎁待签收

虽然耗时略长，但进度还是挺喜人的。这就把礼物的链接🔗发给我嫣。✨

说到制造惊喜CSS可是专业的，我用CSS开发了一份专属我嫣的生日礼物🎁