css实现跳动的心形图案

前言：

      使用伪元素来实现心效果，动画来实现跳动.

效果图：

实现代码：

1、template或者html定义一个容器

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

2、css里面加样式

/*心跳动*/
  .heart {
    top: -4px;
    right: 14px;
    position:relative;
    width: 10px;
    height: 10px;
    margin: 10px auto;
    background-color: tomato;
    /*transform: rotate(45deg);顺时针旋转45度（逆时针旋转是-45deg）*/
    animation: move 1s infinite alternate;/*动画名称 运动时间 运动次数infinite表示无限次 alternate往返效果相同*/
  }
  .heart:before{
    content: "";
    position: absolute;
    top: 0px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: tomato;
  }
  .heart:after {
    content: ""; /*设置:before和:after时必须设置其content属性，否则伪元素就不起作用*/
    position:absolute;/*相对于它的父元素来定位，它的父元素要加上position:relative;*/
    top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: tomato;
  }
  @keyframes move {
    0%{
      transform: scale(0.8) rotate(45deg);/*缩小到0.8倍*/
    }
    100%{
      transform: scale(1.2) rotate(45deg);/*放大到1.2倍*/
    }
  }