Open wingmeng opened 4 years ago
今天是 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>
今天是 10.24,程序员的节日,公司为此举办了“10.24 工程师文化节活动”,现场有个小游戏是用代码实现一个“心形”和“10.24”。本想上前一试,但发现别人都是用 python 写的,就没上,私下自己用 CSS3 写了一个。
CSS 实现心形的原理其实很简单,通过把两个顶部是圆角的矩形分别倾斜 45 度,再叠加起来即可。
> 在线 Demo <