CSS心形加载的动画源码的实现

废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。

  
    
    
    
      .heart-loading {
 margin-top: 120px;
 width: 200px;
 height: 200px;
      }

      ul {
 list-style: none;
 display: flex;
 justify-content: space-between;
 width: 150px;
 height: 10px;
 
      }
      li {
 --count: 9;
 --rgb: calc(var(--index) / var(--count) * .5turn);
 
 --time: calc((var(--index) - 1) * 150ms);
 border-radius: 5px;
 width: 10px;
 height: 10px;
 background-color: #003BB3;
 
 filter: hue-rotate(var(--rgb));
 
 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;
      }
      
      @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);
 }
      }
    
  
  
    
      

 

 

 

 

 

 

 

 

 

      
    
  

到此这篇关于CSS心形加载的动画源码的实现的文章就介绍到这了,更多相关CSS 心形加载动画内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！