不少前端開發(fā)者會用到css3特效，今天在做頁面時用到了一個上下浮動的效果，分享一下。

    
    
    
        div{
            background: #639;
            width: 235px;
            height: 216px;
            position: absolute;
            top: 300px;
            left: 300px;
        }
        /*nimation-delay:1s*/
        @keyframes arrow1{
            0%{transform: translateY(0);}
            100%{transform: translateY(20px);}
        }
 
        @-webkit-keyframes arrow1{
            0%{-webkit-transform: translateY(0);}
            100%{-webkit-transform: translateY(20px);}
        }
 
        .arrow{
            animation: arrow1 2s infinite;
            -webkit-animation: arrow1 2s infinite;
            animation-timing-function:ease-in-out;
            -webkit-animation-timing-function:ease-in-out;
              
            -webkit-animation-direction:alternate;
            animation-direction:alternate;
        }
    


    

        
    

通過以上代碼就能實(shí)現(xiàn)。

演示地址：http://www.xcyouyuan.com.cn/d/demo/fudong/