第 129 期(W3C标准-CSS-动画)：跳动的心 for 10.24程序员节 #132
Description
今天是 10.24，程序员的节日，公司为此举办了“10.24 工程师文化节活动”，现场有个小游戏是用代码实现一个“心形”和“10.24”。本想上前一试，但发现别人都是用 python 写的，就没上，私下自己用 CSS3 写了一个。
CSS 实现心形的原理其实很简单，通过把两个顶部是圆角的矩形分别倾斜 45 度，再叠加起来即可。
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>