CSS3纯动画的爱心

今天看B站上看animation动画的视频发现了这个有趣的案例，也做一下，感觉挺有意思的。用animation动画来写的一个爱心。不是很难，但是也学习一下。

  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

style部分

*{
      margin:0;
      padding:0;
      list-style: none;
    }
    div{
        width:100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000000;
    }
    ul{
      width:100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    li{
      width:10px;
      height: 10px;
      border-radius: 10px;
      background-color: orange;
      margin-right: 10px;
    }

我们先把元素放在这里，然后，我们开始给不同的li添加不同的背景色,前后对称，一共9个li，前后四个的颜色是一样的。

      li:first-child{
      background-color:orange;
    }
    li:nth-child(2){
      background-color: blueviolet;
    }
    li:nth-child(3){
      background-color: yellow;
    }
    li:nth-child(4){
      background-color: blue;
    }
    li:nth-child(5){
      background-color: green;
    }
    li:nth-child(6){
      background-color: blue;
    }
    li:nth-child(7){
      background-color: yellow;
    }
    li:nth-child(8){
      background-color: blueviolet;
    }
    li:nth-child(9){
      background-color: orange;
    }

下面是动画keyframe部分 我们这用到了动画的transformY，让元素向上移动然后回归原位，同时改变元素本身的长度。

   @keyframes heart1 {
      30%,50%{
        height: 60px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart2 {
      30%,50%{
        height: 80px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart3 {
      30%,50%{
        height: 100px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart4 {
      30%,50%{
        height: 120px;
        transform: translateY(-10px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart5 {
      30%,50%{
        height: 140px;
        transform: translateY(10px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart6 {
      30%,50%{
        height: 120px;
        transform: translateY(-10px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart7 {
      30%,50%{
        height: 100px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart8 {
      30%,50%{
        height: 80px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }
    @keyframes heart9 {
      30%,50%{
        height: 60px;
        transform: translateY(-30px);
      }
      70%,100%{
        height: 10px;
        transform: translateY(0px);
      }
    }

//调用动画的部分，我们使用到 匀速执行，同时执行动画的时间我们都可以设置成相同的5s时间，然后，设置一个animation-delay 时间，让元素在不同的时间执行。在每一个li上添加上动画，就是下面的css代码

 li:first-child{
     background-color: orange;
      animation: heart1 5s 0s linear infinite ;
    }
    li:nth-child(2){
      background-color: blueviolet;
      animation: heart2 5s 0.2s linear infinite ;
    }
    li:nth-child(3){
      background-color: yellow;
      animation: heart3 5s 0.4s linear infinite ;
    }
    li:nth-child(4){
      background-color: blue;
      animation: heart4 5s 0.6s linear infinite ;
    }
    li:nth-child(5){
      background-color: green;
      animation: heart5 5s 0.8s linear infinite ;
    }
    li:nth-child(6){
      background-color: blue;
      animation: heart6 5s 0.6s linear infinite ;
    }
    li:nth-child(7){
      background-color: yellow;
      animation: heart7 5s 0.4s linear infinite ;
    }
    li:nth-child(8){
      background-color: blueviolet;
      animation: heart8 5s 0.2s linear infinite ;
    }
    li:nth-child(9){
      background-color: orange;
      animation: heart9 5s 0s linear infinite ;
    }

这样，一个小小的爱心就可以了。 可以点击下面的这个链接在线查看效果。 www.mywu.site/Specialeffe…