Implementation of CSS heart-shaped loading animation source code

Without further ado, let me show you the code. The code is very simple and you will understand it after studying it. If you have any questions, you can ask me.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .heart-loading {
        margin-top: 120px;
        width: 200px;
        height: 200px;
      }

      ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        width: 150px;
        height: 10px;
        /* The idea of making heart shape and strip shape is the same, but the height of each strip is different*/
      }
      li {
        --count: 9;
        --rgb: calc(var(--index) / var(--count) * .5turn);
        /* Do not set the delay too slow. If it is too slow, the heart shape will not be visible. Adjust the delay and animation duration at the same time*/
        --time: calc((var(--index) - 1) * 150ms);
        border-radius: 5px;
        width: 10px;
        height: 10px;
        background-color: #003BB3;
        /* Using the fiter function can make the color gradient very beautiful*/
        filter: hue-rotate(var(--rgb));
        /* The following is the animation duration*/
        animation-duration: 2.5s;
        animation-delay: var(--time);
        animation-iteration-count: infinite;
      }
      .line-1,
      .line-9 {
        animation-name: line-move-1;
      }
      .line-2,
      .line-8 {
        animation-name: line-move-2;
      }
      .line-3,
      .line-7 {
        animation-name: line-move-3;
      }
      .line-4,
      .line-6 {
        animation-name: line-move-4;
      }
      .line-5 {
        animation-name: line-move-5;
      }
      /* Symmetrical animations should be at the same height so that the heart shape can be seen*/
      @keyframes line-move-1 {

        0%,
        10%,
        90%,
        100% {
          height: 10px;
        }

        45%,
        55% {
          height: 30px;
          transform: translate3d(0, -15px, 0);
        }
      }

      @keyframes line-move-2 {

        0%,
        10%,
        90%,
        100% {
          height: 10px;
        }

        45%,
        55% {
          height: 60px;
          transform: translate3d(0, -30px, 0);
        }
      }

      @keyframes line-move-3 {

        0%,
        10%,
        90%,
        100% {
          height: 10px;
        }

        45%,
        55% {
          height: 80px;
          transform: translate3d(0, -40px, 0);
        }
      }

      @keyframes line-move-4 {

        0%,
        10%,
        90%,
        100% {
          height: 10px;
        }

        45%,
        55% {
          height: 90px;
          transform: translate3d(0, -30px, 0);
        }
      }

      @keyframes line-move-5 {

        0%,
        10%,
        90%,
        100% {
          height: 10px;
        }

        45%,
        55% {
          height: 90px;
          transform: translate3d(0, -20px, 0);
        }
      }
    </style>
  </head>
  <body>
    <div class="heart-loading">
      <ul>
        <li class="line-1" style="--index: 1"></li>
        <li class="line-2" style="--index: 2"></li>
        <li class="line-3" style="--index: 3"></li>
        <li class="line-4" style="--index: 4"></li>
        <li class="line-5" style="--index: 5"></li>
        <li class="line-6" style="--index: 6"></li>
        <li class="line-7" style="--index: 7"></li>
        <li class="line-8" style="--index: 8"></li>
        <li class="line-9" style="--index: 9"></li>
      </ul>
    </div>
  </body>
</html>

This is the end of this article about the implementation of the CSS heart-shaped loading animation source code. For more related CSS heart-shaped loading animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: A simple way to call desktop exe programs on a web page

>>: An analysis of div+float, a very important concept in website design