第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节

[wingmeng]

今天是 10.24，程序员的节日，公司为此举办了“10.24 工程师文化节活动”，现场有个小游戏是用代码实现一个“心形”和“10.24”。本想上前一试，但发现别人都是用 python 写的，就没上，私下自己用 CSS3 写了一个。

CSS 实现心形的原理其实很简单，通过把两个顶部是圆角的矩形分别倾斜 45 度，再叠加起来即可。

> 在线 Demo <

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.heart {
  --size: 200px;

  position: relative;
  width: var(--size);
  text-align: center;
  line-height: var(--size);
  font-size: calc(var(--size) / 10);
  color: #c00;
  filter: drop-shadow(0 0 calc(var(--size) / 4));
  animation: Blink 1s linear 520;
}

.heart::first-line {
  color: #fff;
}

.heart::before,
.heart::after {
  content: '';
  position: absolute;
  top: 0; left: 11px;
  z-index: -1;
  width: 61.8%;
  height: 100%;
  transform: rotate(-45deg);
  background: currentColor;
  border-radius: var(--size) var(--size) 0 0;
}

.heart::after {
  left: auto;
  right: 11px;
  transform: rotate(45deg);
}

@keyframes Blink {
  50% {transform: scale(.8);}
}

<div class="heart">10.24◆节日快乐</div>