css3实现上下浮动的效果

不少前端 开发者会用到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=/html/"images/gyy_18.jpg
    </div>
</body>
</html>

通过以上 代码就能实现。

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

关键词:
返回列表

相关文章

相关案例

友情链接:    长江彩票_全网唯一   仲博彩票_安全购彩   6288彩票_安全购彩   手机彩票-首页   下载app送18元彩金