代码情诗，你知道多少种绘制爱心的方式 | CSS 篇

#代码情诗# 我正在参与「JUEJIN FRIENDS 告白计划」

本文教你多种爱心的绘制方式，再也不怕 520 孤寡的过了。

文字爱心

首先我们来个最简单的，使用文字图标爱心，爱心的 unicode 编码为 ♥

因为是图文字，因此我们可以直接利用字体的方式来设置颜色和大小。

<div class="heart">&#x2665;</div>

body { 
    text-align: center; 
}
.heart {
    font-size: 150px;
    color: #e00;
    transform-origin: center;
}

使用上面的代码，我们就可以生成一个红色的爱心。

单纯的爱心并不好看，我们让它动起来，展示我们的炙热真心。设置一个 scale 放大缩小的动画。

@keyframes beat{
    to { transform: scale(1.4); }
}
// 添加动画效果

.heart{
    animation: beat .25s infinite alternate;
}

光有真心可不行，万一读不懂咋办。在爱心下面添加一行文字，具体是什么文字就看你了哦，这里使用 Follow your heart。完整的效果就实现了，具体代码参考码上掘金。

码上掘金 (juejin.cn)

CSS 实现爱心

CSS 爱心是配合伪元素 :after 和 :before 进行实现。

首先我们定义全局的样式。

html,
body {
  width: 100%;
  height: 100%;
  min-width: 500px;
  min-height: 500px;
  overflow: hidden;
}

然后设置 heart 类的位置，使用绝对定位配合 margin 负值实现水平垂直居中效果。

.heart {
    position: absolute;
    width: 100px;
    height: 90px;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -50px;
}

本文的爱心实现非常有意思，下面你要睁大眼睛，别错失精彩哦。

我们将两个伪元素都定义为上面为半圆，下面为矩形的样式，具体代码如下:

&:before,
&:after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    background: #fc2e5a;
    border-radius: 50px 50px 0 0;
}

然后我们分别将 :before 和 :after 伪元素进行 45° 旋转。

重合了，没事，我们分别修改两个伪元素的旋转中心。

是不是有点摸样了，最后修改两个伪元素的定位位置。

成功实现，下面是完整代码设置。

&:before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

&:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

老规矩，光是单纯的爱心没意思，我们加一下动画效果，这次我们玩点花的，使用两种动画效果，我们修改 html 格式如下:

<div class="heart heart-bg"></div>
<div class="heart heart-main"></div>

内部爱心设置小范围的放大缩小，外部爱心设置大范围的放大缩小，实现爱心推进的效果。 外部爱心同步添加一个透明度变化效果。

.heart-bg {
  animation: heart-anim 1s linear .4s infinite;
  
  &:before,
  &:after {
    background-color: #ff7693;
  }
}

.heart-main {
  animation: pounding .5s linear infinite alternate;
}

@keyframes pounding {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heart-anim {
  46% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  52% {
    transform: scale(1.5);
  }
  55% {
    transform: scale(3);
  }
  100% {
    opacity: 0;
    transform: scale(50);
  }
}

最终效果实现:

完整代码可见码上掘金: 码上掘金 (juejin.cn)