初入FCC闯关笔记 #1

从今天开始，养成在CSDN上写博客的习惯，相信自己可以坚持下来，一年后，成为一名前端工程师 。

以下内容是我在FCC（freecodecamp）上闯关过程中遇到的问题以及相关笔记，纯粹个人笔记向，大神避让~

今天在FCC上遇到了一个用CSS动画做出心跳效果的部分代码，用到的主要知识有伪元素before和after，还有一些简单的动画操作，代码如下：

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s; 
    animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count:infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

该代码实现思路很简单，先创建一个正方形，然后将其旋转45度，然后将伪元素after和before复制的两个圆分别移动到左上和右上就可以模拟出心形。效果图如下。

其实这里是动画显示，背景和心都会有节奏的跳动变色。

我所奇怪的是，为什么在.heart中已经旋转了的元素要在动画设置中再旋转两次，如下。

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

后来，请教了别人才知道在动画设置中，transform属性重置了heart元素，使得原来的旋转失效了，因此在每次动画化的结点都要再次旋转，才能保证心形的正直。