1. 运用知识

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。伪元素属于行内元素，创建的这个元素在文档树中是找不到的，因此称为伪元素。伪元素选择器和标签选择器一样，权重为1。

// 语法
.类名::before {
   content: ''; // 必须属性
}
// 在父元素内部的前面创建元素
-----
// 语法
.类名::after {
   content: ''; // 必须属性
}
// 在父元素内部的后面插入元素

子绝父相

// 子元素设置绝对定位 父元素设置相对定位

.father {
  position: relative
}
.son {
  position: absolute
    left:0;
  	top:0;
}

平面转换 2D

位移

语法：transform: translate(水平移动距离,垂直移动距离)

单独设置某个方向的移动距离

语法：transform: translateX() ;transform: translateY()

旋转

语法：transform: rotate( deg)

缩放

语法：transform: scale(缩放倍数)

动画

设置动画效果分两步：

定义动画
使用动画

// 定义动画
语法一
@keyframes 动画名称 {
  from {}
  to {}
}
语法二
@keyframes 动画名称 {
  25% {}
  50% {}
  75% {}
  100% {}
}
// 使用动画
animation: 动画名称 动画时长 重复次数 ;

2. 代码部分

跳动的心，css样式设置

    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      margin: 150px auto;
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* 默认将其旋转45度 */
      transform: rotate(45deg);
      /* 调用动画 */
      animation: move 1s linear infinite;
    }

    .box::before,
    .box::after {
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      /* 跟其父元素一样大 */
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #f00;
    }

    .box::before {
      transform: translateX(-50%);
    }

    .box::after {
      transform: translateY(-50%);
    }

    /* 定义动画 */
    @keyframes move {

      25% {
        transform: scale(2) rotate(45deg);
      }

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

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

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

完整html代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      margin: 150px auto;
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* 默认将其旋转45度 */
      transform: rotate(45deg);
      /* 调用动画 */
      animation: move 1s linear infinite;
    }

    .box::before,
    .box::after {
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      /* 跟其父元素一样大 */
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #f00;
    }

    .box::before {
      transform: translateX(-50%);
    }

    .box::after {
      transform: translateY(-50%);
    }

    /* 定义动画 */
    @keyframes move {

      25% {
        transform: scale(2) rotate(45deg);
      }

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

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

      100% {
        transform: scale(1) rotate(45deg);
      }
    }
  </style>
</head>

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

</html>

程序员的浪漫 用VScode写个跳动的♥ 发给她