css3图片上下浮动动画

ctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上下浮动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }       
        body {
            position: relative;
            background: #90C0F1;
            overflow: hidden;
        }        
        .ghost {
            width: 160px;
            margin: 100px auto;
            position: relative;
            animation: ghostUpdown 1s infinite alternate;
            -webkit-animation: ghostUpdown 1s infinite alternate;
        }    
        @keyframes ghostUpdown {
            from {
                margin-top: 100px;
            }
            to {
                margin-top: 70px;
            }
        }     
        @-webkit-keyframes ghostUpdown {
            from {
                margin-top: 100px;
            }
            to {
                margin-top: 70px;
            }
        }
    </style>
    </head>
    <body>
    <div class="ghost">
        <img src="http://statics.76sd.com//data/files/recommend/20180423/5add389c5baaf.jpg ">     </div>
    </body>
</html>
版权声明：本文为weixin_42220039原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。