咨询电话:
15628812133
09
2017/07

css3实现上下浮动的效果

发布时间:2017-07-09 19:20:54
发布者:jiangbing
浏览量:
0

不少前端开发者会用到css3特效,今天在做页面时用到了一个上下浮动的效果,分享一下。




    
    Document
    
        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;
        }
    


    
             

通过以上代码就能实现。

演示地址:http://www.cnwenhui.cn/d/demo/fudong/

关键词:
返回列表