css3实现上下浮动的效果_前端知识_文汇软件

css3实现上下浮动的效果

发布者：jiangbing
阅读量：3246
时间：2017.07.09

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/gyy_18.jpg" />
    </div>
</body>
</html>

通过以上代码就能实现。

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

关键词：