茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
    • 

    <sub id="ddbnn"><ol id="ddbnn"></ol></sub>
  • 

    <legend id="ddbnn"></legend><s id="ddbnn"></s>
    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    8款使用 CSS3 實(shí)現(xiàn)超炫的 Loading（加載）的動(dòng)畫(huà)效果
    
            
    來(lái)源：易賢網(wǎng)  閱讀：1951 次  日期：2015-04-14 14:55:46 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“8款使用 CSS3 實(shí)現(xiàn)超炫的 Loading（加載）的動(dòng)畫(huà)效果”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    很棒的loading效果，收藏一下
    

    一
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    margin: 100px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    }
    .spinner > div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
    }
    .spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
    }
    .spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }
    .spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }
    .spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }
    @-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
    20% { -webkit-transform: scaleY(1.0) }
    }
    @keyframes stretchdelay {
    0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    } 20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
    }
    }
    

    二
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner"></div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    width: 60px;
    height: 60px;
    background-color: #67CF22;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
    }
    @-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
    }
    @keyframes rotateplane {
    0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
    }
    

    三
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    width: 60px;
    height: 60px;
    position: relative;
    margin: 100px auto;
    }
    .double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67CF22;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
    }
    .double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }
    @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
    }
    @keyframes bounce {
    0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
    }
    

    四
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="cube1"></div>
    <div class="cube2"></div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    margin: 100px auto;
    width: 32px;
    height: 32px;
    position: relative;
    }
    .cube1, .cube2 {
    background-color: #67CF22;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
    }
    .cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }
    @-webkit-keyframes cubemove {
    25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
    }
    @keyframes cubemove {
    25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    }
    }
    

    五
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="dot1"></div>
    <div class="dot2"></div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    margin: 100px auto;
    width: 90px;
    height: 90px;
    position: relative;
    text-align: center;
    -webkit-animation: rotate 2.0s infinite linear;
    animation: rotate 2.0s infinite linear;
    }
    .dot1, .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #67CF22;
    border-radius: 100%;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
    }
    .dot2 {
    top: auto;
    bottom: 0px;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }
    @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
    @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
    @-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
    }
    @keyframes bounce {
    0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
    }
    

    六
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    margin: 100px auto 0;
    width: 150px;
    text-align: center;
    }
    .spinner > div {
    width: 30px;
    height: 30px;
    background-color: #67CF22;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
    }
    .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    }
    @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
    }
    @keyframes bouncedelay {
    0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
    }
    

    七
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner"></div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    width: 40px;
    height: 40px;
    margin: 100px auto;
    background-color: #333;
    border-radius: 100%; 
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
    }
    @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(0.0) }
    100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    }
    }
    @keyframes scaleout {
    0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
    }
    }
    

    八
    

    HTML 代碼：
    

    代碼如下:
    <div class="spinner">
    <div class="spinner-container container1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    </div>
    </div>
    

    CSS 代碼：
    

    代碼如下:
    .spinner {
    margin: 100px auto;
    width: 20px;
    height: 20px;
    position: relative;
    }
    .container1 > div, .container2 > div, .container3 > div {
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    .spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    .container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    }
    .container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    }
    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }
    .container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
    }
    .container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    }
    .container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }
    .container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    }
    .container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
    }
    .container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
    }
    .container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    }
    .container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
    }
    .container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
    }
    .container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
    }
    .container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
    }
    @-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
    }
    @keyframes bouncedelay {
    0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    }
    }
    

    更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
                
    
            
    
                        
    
            
    更多信息請(qǐng)查看網(wǎng)頁(yè)制作
    
            
    
            
            
            
            
            
    由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)！
    
            
    
                
    相關(guān)閱讀網(wǎng)頁(yè)制作
    
                                
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                              
                          
    
        
    
    
    
    
    
        

					
		
    
		
    
            
    
                
    2026上岸·考公考編培訓(xùn)報(bào)班
    
                
      

                    
    • 
                        報(bào)班類(lèi)型
                        
                    
      • 
                    
    • 
                        姓名
                        
                    
      • 
                    
    • 
                        手機(jī)號(hào)
                        
                    
      • 
					
    • 
                        驗(yàn)證碼
                        
                        
                    
      • 
                    
    • 
                        
						
                        
                    
      • 
                
    
            
    
        
    
		
    
        

        
    
    
    
    
    

    

    

    


    
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 |  新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn)  | 投訴建議 

    

    
     工業(yè)和信息化部備案號(hào)：滇ICP備2023014141號(hào)-1
    云南省教育廳備案號(hào)：云教ICP備0901021
    滇公網(wǎng)安備53010202001879號(hào) 
    人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號(hào)

    

    
    
    
        云南網(wǎng)警備案專(zhuān)用圖標(biāo)
    
    
    
    
        聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào)：hfpxwx 
    
    咨詢QQ：1093837350（9:00—18:00）版權(quán)所有:易賢網(wǎng)
    
    
    
    
        云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)