用css绘制一个动态心形

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

今天我们用css来绘制一个动态的心形图案

其实绘制心形图案的方法有很多，我们可以用html,css,canvas,javascript等很多方法来绘制，当然用canvas专业画图，可以画出很多很好看的图案出来，我们用javascript也能写出很多动态效果出来。

今天，就小小实现一个css画出来的动态效果的心形图案

我们知道最简单的爱心就是一个文字编码，或是一个爱心函数，我们通过写一个爱心编码 ♥ 就可以画出一个爱心出来

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

当然，这只是最简单的，如果我们要写出动态的爱心，并且给它加上各种样式出来，就的用更多属性来搭建它。

现在来绘制一个嵌套的爱心

首先先在页面上写两个爱心的容器，用来装这两个爱心

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

给页面背景添点样式，使动态效果看起来更明显些

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

之后就可以给两个心形添加样式来绘制出心形形状出来，在这里我们可以利用伪元素来绘制出心形图案

.heart {
    position: absolute;
    width: 100px;
    height: 90px;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -50px;
  }
​
  .heart:before,
  .heart:after {
    content: '';
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    background-color: #fc2e5a;
    border-radius: 50px 50px 0 0;
  }
​
  .heart:before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

这是静态的心形图案就绘制出来了，两个刚开始是重合在一起的，这时候就需要我们分别给他们设定变化样式，产生一种动画的效果出来，所以我们可以利用animation动画继而搭配@keyframes逐帧变化，在里面可以套用相同的形状，然后设置不同的animation变化

.heart-bg {
    animation: internal 1s linear 0.4s infinite;
  }
​
  .heart-bg:before,
  .heart-bg:after {
    background-color: #ff7693;
  }
​
  .heart-main {
    animation: external 0.5s linear infinite alternate;
  }

这里我们设置的是可以进行爱心前后颜色的变化，变化时间间隔等属性

之后在搭配@keyframes进行一个缩放，模拟爱心跳动的一个效果

@keyframes external {
    0% {
      transform: scale(1.5);
    }
​
    100% {
      transform: scale(1);
    }
  }
​
  @keyframes internal {
    46% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    52% {
      transform: scale(1.5);
    }
    55% {
      transform: scale(3);
    }
    100% {
      transform: scale(6);
    }
  }

这样就完成了一个简单的爱心动态效果