用css写出爱心跳动的效果写爱心跳动的方法首先搭建一个正方形盒子,将盒子45度旋转,用伪元素在盒子上面加上两个相同宽高

用css写出爱心跳动的方法

首先搭建一个正方形的盒子

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

将盒子45度旋转

    .box {
      position: relative;
      margin: 100px auto;
      width: 200px;
      height: 200px;
      background-color: #f00;
      
      /* 将盒子45度旋转 */
      transform: scale(0.5) rotate(45deg);
      
      /* 调用动画 */
      animation: tiaodong 2s infinite;
    }

用伪元素在盒子上面加上两个相同宽高的圆形,用平面位移将两个圆分别位移宽高一半的数值到正方形盒子的左上方和右上方

    /* 伪元素造出两个圆 */
    .box::after {
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      background-color: #f00;
      border-radius: 50%;
      
      /* 将两个圆进行位移 */
      transform: translateY(-100px);
    }

示例图片如下

微信截图_20220312144356.png

接下来给整个盒子来定义动画,让盒子在不同的时间来进行放大和缩放,最后给box盒子添加动画使用属性,就能让红心自己跳动起来了

    /* 定义动画 */
    @keyframes tiaodong {
      25% {
        transform: scale(1) rotate(45deg);
      }

      50% {
        transform: scale(0.5) rotate(45deg);
      }

      75% {
        transform: scale(1) rotate(45deg);
      }

      100% {
        transform: scale(0.5) rotate(45deg);
      }
    }