【生日快乐】女朋友马上就要生日了，是时候画一个蛋糕看看了！

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

前言

不知道大家有没有看到过我以前写的这篇文章【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件

没看过不要紧，现在让大家重新回顾一下。

根据动态计算的距离今年的生日天数已经所剩不多了，是时候花一分钟弄个蛋糕出来让她看看了。

先看效果再写代码

😆 看起来是不是很简单，就是三个不同颜色的长方形拼起来的。

😆也就加了点波浪的效果，最后再加点动画效果就完成了。

画第一层

🤨 先给个底座，也就是最下面那个灰色底盘

<div class="cake_base"></div>

.cake_base {
  top: 60.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 20%;
  height: 1.5%;
  background-color: lightgray;
}

🤨 再来个粉色蛋糕层

<div class="tier1"></div>

.tier1 {
  top: 57%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 10px;
  width: 18%;
  height: 6%;
  background-color: #e7b1db;
  z-index: 1;
}

😏 这时候的样式还只是两个模块层，并没有做特殊的波浪效果

🤨 先裁掉一部分

<div class="white1"></div>

🤨 再用几个白色圈圈覆盖上去当做凹陷的波浪形状

<div class="detail1"></div>
<div class="detail2"></div>
<div class="detail3"></div>
<div class="detail3a"></div>
<div class="detail3b"></div>

• detail3a 和 detail3b 的样式是左右两个角的凹陷部位

.white1 {
  top: 54.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 18%;
  height: 1%;
  background-color: white;
  z-index: 1;
}

.detail1 {
  top: 54.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 50%;
  width: 4%;
  height: 2%;
  background-color: white;
  z-index: 1;
}

.detail2 {
  top: 54.5%;
  left: 55%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 50%;
  width: 4%;
  height: 2%;
  background-color: white;
  z-index: 1;
}

.detail3 {
  top: 54.5%;
  left: 45%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 50%;
  width: 4%;
  height: 2%;
  background-color: white;
  z-index: 1;
}

.detail3a {
  top: 54.5%;
  left: 40%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 50%;
  width: 4%;
  height: 2%;
  background-color: white;
  z-index: 1;
}

.detail3b {
  top: 54.5%;
  left: 60%;
  transform: translate(-50%,-50%);
  position: absolute;
  border-radius: 50%;
  width: 4%;
  height: 2%;
  background-color: white;
  z-index: 1;
}

• 凹陷只有部分的差异，样式其实是可以合并起来的哦。

🙄 不要问为啥上面有部分线段。。问就是样式没写好。。。

🤨 拦腰加一条装饰线

<div class="tier1d"></div>

.tier1d {
  top: 57%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 18%;
  height: 1.5%;
  background-color: #db57bd;
  z-index: 1;
}

• 最底下的一层就做好了，然后把蛋糕层复制两份，修改一下宽度和颜色就有了其他两层

加个蜡烛

🤨 蜡烛躯干部分就比较简单了，一个长方形上下变圆角就好

<div class="holder"></div>

.holder {
  top: 38%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  width: 1.5%;
  border-radius: 30px;
  height: 7%;
  background-color: beige;
  z-index: 1;
}

🤨 烛光的样式可能比较复杂，加了一圈阴影效果，并且用 animation 加了动画效果，这样可以感觉到火光在风中摇曳。

<div class="flame"></div>

.flame {
  position: absolute;
  background-color: orange;
  width: 1.5%;
  height: 4.5%;
  border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px 1px orange;
  animation: shadow 1s ease-in-out alternate infinite, move 3s linear infinite;
}

@keyframes shadow {
  0% {
    box-shadow: 0 0 10px 1px orange;
  }
  25% {
    box-shadow: 0 0 15px 1px orange;
  }
  50% {
    box-shadow: 0 0 20px 1px orange;
  }
  75% {
    box-shadow: 0 0 15px 1px orange;
  }
  100% {
    box-shadow: 0 0 10px 1px orange;
  }
}

@keyframes move {
  0%, 100% {
    transform: translateX(-50%) rotate(-5deg)
  }
  50% {
    transform: translateX(-50%) rotate(5deg)
  }
}

🤨 最后加上一行字就大功告成了！

<h2>Happy birthday!</h2>

🤨 文字样式可以引用谷歌api的css文件

@import url('fonts.googleapis.com/css?family=…');

码上掘金看效果