SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<div class="loader"></div>

            
.loader{
  display:flex;
  justify-content:center;
}
.loader:before{
  content:'';
  width: 30px;
  height: 30px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: url(data:image/jpeg;base64,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) center / cover;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0); } }

@keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
    transform: perspective(100px) rotateX(180deg) rotateY(0); }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
    transform: perspective(100px) rotateX(0) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0); } }