CSS动画3----- 跳动的心

学习链接：B站视频

一、绘制心形

讲解

所谓心形，就是一个正方形，加两个直径等于正方形的圆组成的

然后再旋转45°，把边框去掉就获得一个爱心了

代码

<div class="heart">div>

    .heart {   /* 为一个正方形 */
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #e74c3c;
      transform: rotate(45deg); /* 旋转45° */
    }
    .heart::before,     /* 使用伪元素来构造圆 */
    .heart::after {
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #e74c3c;
    }
    .heart::before {
      transform: translateX(-100px);
    }
    .heart::after {
      transform: translateY(-100px);
    }

二、跳动起来

演示

(莫名的害怕)

代码

<div class="heart">div>

    .heart {  /* 为一个正方形 */
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #e74c3c;
      transform: rotate(45deg) scale(.5);  /* 旋转45° */
      opacity: .5;
      animation-name: hd;
      animation-duration: 2s;
      animation-iteration-count: infinite;  /* 无限循环 */
    }

    .heart::before,   /* 使用伪元素来构造圆 */
    .heart::after { 
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #e74c3c;
    }
    .heart::before {
      transform: translateX(-100px);
    }
    .heart::after {
      transform: translateY(-100px);
    }

    @keyframes hd {  /* 定义动画的变化帧：缩放、透明度 */
      25% {
        opacity: 1;
        transform: rotate(45deg) scale(1); 
      }
      50% {
        opacity: .5;
        transform: rotate(45deg) scale(.5);
      }
      75% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
      }
      to {
        opacity: .5;
        transform: rotate(45deg) scale(.5); 
      }
    }