前言

今天刚好看到掘金上线了码上掘金功能，支持编辑代码，实时保存，可以在线看到效果。那么今天借着这个平台，简单实现一个爱心，然后给它加上动画效果，变成心动的爱心。

效果演示

code.juejin.cn/pen/7086091…

爱心

css里面没有直接实现爱心的效果，我们需要用几个图形拼接起来实现爱心。

这里我用到了三个正方形来拼接，上面是2个正方形，下面是一个正方形。

这里我使用伪元素（before，after）来实现上面2个正方形。下面的正方形用div实现。

当然你也可以使用3个div来实现。

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

    .heart,
    .heart::before,
    .heart::after {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      background-color: red;
    }

现在3个div是并列排的，我们可以对它移动，先排成爱心的形状。

我们使用绝对定位把before，after向左，和向上移动自身宽度的一半。

    .heart {
      position: relative;
    }

    .heart::before {
      position: absolute;
      left: -50px;
    }

    .heart::after {
      position: absolute;
      top: -50px;
    }

你倾斜45度看，是不是爱心的轮廓已经出来了？

然后我们对上面的2个图形（before，after）把它的正方形边设置成圆角。

    .heart::before {
      position: absolute;
      left: -50px;
      border-radius: 50px;
    }

    .heart::after {
      position: absolute;
      top: -50px;
      border-radius: 50px;
    }

你看，爱心是不是出来了，只不过是倾斜45度的。

下面我就来把它摆正。给heart类设置顺时针旋转45度

    .box {
      transform: rotate(45deg);
    }

你看爱心是不是摆正了。一个红彤彤的爱心出炉了。

现在看到的爱心还是静态的，下面我给它加上动画。让它可以动起来。

这里我使用的css3的animation动画。

    .heart {
      position: relative;
      animation: heart 0.8s infinite;
    }
    @keyframes heart {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }

可以看到，爱心已经在动了。

总结

这个爱心主要是使用了伪类元素，使用绝对定位，再加上border-radius实现圆角，最后再用rotate实现旋转摆正。

如果要加上动画，可以使用css3的animation动画效果。

感谢你的阅读。

css实现一个会心动的爱心💗

前言

效果演示

爱心

总结