css3图片上下浮动动画

最新推荐文章于 2024-03-29 03:34:03 发布

梨童就是小梨童呀

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量8.2k

点赞数 2

分类专栏： css3 文章标签： css3动画

本文链接：https://blog.csdn.net/weixin_42220039/article/details/83037846

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

梨童就是小梨童呀

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3图片上下浮动动画

ctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片上下浮动&lt;/title&gt; &lt;style&gt; * { padding: 0;
复制链接

扫一扫