好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css3实现循环执行动画,且动画每次都有延迟-starof

一、最终效果

需求:gift图片的小动画每隔2s执行一次。

需求就一句话,我们看一下实现过程。

二、实现过程

1、网页结构

   DOCTYPE html  > 
   html   lang  ="en"  > 

   head  > 
       meta   charset  ="UTF-8"  > 
       title  > Document   title  > 
       style  >  
    a   {  
        display  :   inline-block  ;  
        background-color  :   #cc2222  ;  
        text-decoration  :   none  ;  
        color  :   #fff  ;  
        font-size  :   14px  ;  
        padding  :   10px 12px  ;  
        width  :   100px  ;  
        position  :   relative  ; 
     }  
    
    .ico   {  
        position  :   absolute  ;  
        width  :   14px  ;  
        height  :   16px  ;  
        background  :   url(images/ico.png) no-repeat center  ;  
        background-size  :   100%  ;  
        position  :   absolute  ;  
        top  :   4px  ;  
        right  :   27px  ; 
     } 
       style  > 
   head  > 

   body  > 
       nav  > 
           a   href  ="javascript:;"   class  ="box"  >  
                            一元夺宝 
                                div   class  ="ico"  >  div  > 
                           a  > 
       nav  > 
   body  > 

   html  >  

查看更多关于css3实现循环执行动画,且动画每次都有延迟-starof的详细内容...

  阅读:40次