不带图片的加载中动图html代码 loading-img

`

不带图片的加载中动图html代码 loading-img

 

<html>
  <head>
    <meta charset="UTF-8">
    <title>Loading...</title> 
    <style type="text/css">
        #loading-img {
        width:  3.312rem;
        height: 3.312rem;
        background:url(data:image/png;base64,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) no-repeat 0 0;
         background-size: 100% 100%;
         animation-fill-mode: both;
         -webkit-animation: run .85s linear 0s infinite;  
}
    @-webkit-keyframes run{  
        from{  
            -webkit-transform:rotate(0deg);  
        }  
        to{  
            -webkit-transform:rotate(360deg);  
        }  
    } 
   </style>
</head>
<body>

<div id="loading-img"></div>

</body>
</html>  

 

 

 

对任意图片进行旋转:

<!-- 取任意图片的顶部280px作为圆形进行旋转  -->
<style type="text/css">  
    #Pic{  
        width: 280px;  
        height:280px;  
        background: url(https://files.cnblogs.com/files/k1two2/leftmenu-imgs-3.gif) no-repeat;  
        border-radius:140px;  
        -webkit-animation:run 6s linear 0s infinite;  
    }  

    #liu:hover{  
        -webkit-animation-play-state:paused;  
    }  


    @-webkit-keyframes run{  
        from{  
            -webkit-transform:rotate(0deg);  
        }  
        to{  
            -webkit-transform:rotate(360deg);  
        }  
    }  
</style>  

<div id="Pic"></div>  
<!-- //参考:https://www.cnblogs.com/k1two2/p/4992985.html -->

  

  

 

 

`

posted @ 2020-12-15 21:38  亟待!  阅读(1552)  评论(0编辑  收藏  举报
……