cssアニメーションを更新し、アニメーションをロード

4469 ワード
アニメ3
cssアニメーション効果
アニメーション効果1
効果は図のように
このロードアニメーションは他の場所で見たことがありますが、忘れました.
ダイナミックエフェクトを表示するには
実現構想:
1.分割構造
9つの立方体を1つに分けて分析し,最終的に単一の立方体の構造を導出し,3つの面からなり,コードは以下の通りである.
         
li{  
          height: @boxS / 2;  
          width:@boxS;  
          display: inline-block;  
          background: @theme;  
          position: relative;  
          transform: skew(-@shape, 0deg);  
          margin: @pads;  
          box-shadow: 130px 140px 10px 0px #0000002e;  
          transition: all 1s;  
          &::after{  
            content: "";  
            height: @boxS / 2;  
            width: @boxS;  
            display: inline-block;  
            position: absolute;  
            background: darken(@theme , 10%);  
            transform: skew(0deg, @shape);  
            top: @boxS / 2;  
            left: 100%;  
          }  
  
          &::before{  
          content: "";  
          height: @boxS;  
          width: @boxS;  
          display: inline-block;  
          position: absolute;  
          background: lighten(@theme , 10%);  
          transform: skew(@shape, 0deg);  
          top: @boxS / 2;  
          left: @boxS / 2;  
          }   
        }

2.組合せ構造
その3行3列の構造は、DOM上で3*3の構造を採用することができ、ラベルulとliを使用して、9つのブロックを組み合わせたときにブロックについて垂直に配列することができ、効果は図のように示されている.
これが私がDom構造を3つのulに分けた理由で、直接f_に分けました.1、f_2,f 3は操作を行い、位置を微調整し、調整が完了すると上図1の効果が得られる.
     
  
        
      
            
  •   
            
  •   
            
  •   
        
  
        
      
            
  •   
            
  •   
            
  •   
        
  
        
      
            
  •   
            
  •   
            
  •   
        
  
    
   
 
3.      
 
 
  ，        ，       ，    ，          transform，                ，        。
 
 
@keyframes  box-load-run{  
      0%{  
        transform: translate(0px , 0px) skew(-45deg, 0deg);  
      }  
  
      50% {  
        transform: translate(0px , 12px) skew(-45deg, 0deg);  
      }  
  
      100% {  
        transform: translate(0px , 0px) skew(-45deg, 0deg);  
      }  
    }  
  
 に、9つのキューブが いたときに の きの  を  するためには、アニメーションの  と き  を  する  があります.この  のために、liラベルの で  される  を  しました.
     
.runs(@time , @dey){  
     &:first-child{  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 1;  
  }  

  &:nth-child(2){  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 2;  
  }  

  &:last-child{  
    animation: box-load-run @time infinite ease-in-out;  
    animation-delay: @dey * 3;  
  }  
} 
  
パラメータ  :@time:    @dey: き  .
    いアニメーション  を  するために、 たちはアニメーションが ってくる  があります. やかすぎますので、ease-in-outを  します.
  に、  スタイルと み わせてアニメーション  を  します.
     
.f_1{  
  li{  
     .runs(1.2s , 0.1s );  
  }  
}  

.f_2{  
  li{  
    .runs(1.2s , 0.2s);  
  }  
}  

.f_3{  
   li{  
    .runs(1.2s , 0.3s );  
  }  
}  
  
まとめ
このようなアニメーションの  はとっくに に かれて、しかし は  として  で    して、 な  はアニメーションの  を くためではありませんて、  の  の を めて、  の  を るためです. を げると、このアニメーションを くとき、lessの  に れていません.
 1 :.runsという  は、 の  が   されています.lessのforサイクルが  される.
 2 :ページ  はulのラベルを1つ  するだけでも  することができ、cssの    セレクタ、lessのループと   を み わせることができます.
   :    としてもっと  の  が  で、ある    すると ず の  が  し、  の  や  の を  し、みんなに  させたい.
アニメーション  アドレス:https://angular-t4cuvf.stackblitz.io/boxLoad
ここでは、クリックしてコード  を    できます.
この で  するcssプリコンパイル  less.




印刷時にスタイルが有効にならない理由
chrome開発者ツールNetwork