zoukankan      html  css  js  c++  java
  • 不带图片的加载中动图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{  
             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 -->
    

      

      

    `

  • 相关阅读:
    sql server获取指定库下的所有表名
    sql根据字符将一行拆成多行
    刷题416. Partition Equal Subset Sum
    刷题394. Decode String
    刷题347. Top K Frequent Elements
    刷题309. Best Time to Buy and Sell Stock with Cooldown
    刷题338. Counting Bits
    刷题337. House Robber III
    刷题312. Burst Balloons
    刷题621. Task Scheduler
  • 原文地址:https://www.cnblogs.com/05-hust/p/14141190.html
Copyright © 2011-2022 走看看