送给你的跳动之心：感恩与爱的表达

情人节起源可以追溯到2月中旬庆祝的古罗马卢佩卡利亚节（Lupercalia）。这个节日是为了纪念罗马神卢珀库斯，他是生育和爱之神，并通过彩票将男女配对。随着时间的推移，这个节日不断发展，并与基督教圣人瓦伦丁联系在一起。

情人节是世界各地情侣表达彼此的爱和感情的特殊日子。在这一天，交换礼物、巧克力、鲜花和情书，以表明一个人有多关心他们的另一半。

为了纪念这个即将到来的特殊日子，以下代码创建了一颗跳动的心的视觉表示，象征着爱的节奏。

HTML代码创建一个带有心类的div。

<div class="heart"></div>

CSS代码设置div的样式，以形成一个带有动画的心形，使其节拍。心脏是红色的，是爱的颜色，它的位置被设置为屏幕的中心。

body{
  padding:40vh 0;
  background-color:#fff
}

.heart {
  animation: heartbeat 1s infinite;
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

关键帧动画使心脏成长和收缩，给人一种心跳的错觉。心脏由两个元素组成，前后伪元素，这些元素的风格看起来像圆圈，并定位为形成心形。

@keyframes heartbeat
{
  0%
  {
    transform: scale( 1 )
      rotate(-45deg);    
  }
  20%
  {
    transform: scale( 1.25 )
      rotate(-45deg);  
  }
   40%
  {
    transform: scale( 1.5 )
      rotate(-45deg);
  }
}

总之，该代码创造了美丽而有意义的爱情表现，使其成为情人节的完美选择。因此，无论您是与另一半共度一天，还是只是想向特别的人表达爱意，这颗充满爱心跳动的心都是这样做的完美方式。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情