css3简单动画之火箭快跑

最新推荐文章于 2021-09-18 21:48:24 发布

bubucuo

最新推荐文章于 2021-09-18 21:48:24 发布

阅读量728

点赞数

分类专栏：前端日记

本文链接：https://blog.csdn.net/fangfanggaogao/article/details/45501163

版权

前端日记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title></title>
    <style type="text/css">
        #page{
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        #sky{
            width: 100%;
            height: 680px;
            position: relative;
        }
        #cloud{
            position: absolute;
            -webkit-animation: cloud_run .7s ease 0s infinite normal;
        }
        @-webkit-keyframes cloud_run{
            from{
                top:-150px;
                left: 70%;
                width: 700px;
            }
            to{
                top:733px;
                left: 0%;
                width: 100%;
            }
        }
        #rocket{
            position: absolute;
            z-index: 10;
            width: 70%;
            -webkit-animation: rocket_run .1s linear 0s infinite normal;
        }
        @-webkit-keyframes rocket_run{
            from{
                top: 0;
                left: 0;
            }
            to{
                top: -5px;
                left: 0px;
            }
        }
    </style>
</head>
<body>
<div id="page">
    <img id="sky" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9777.jpg-thumb.jpg">
    <img id="cloud" src="https://img-my.csdn.net/uploads/201505/05/1430803263_2305.png-thumb.jpg">
    <img id="rocket" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9115.png">
    <div>

    </div>
</div>
</body>
<script type="text/javascript">


</script>

</html>

bubucuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3简单动画之火箭快跑

#page{ position: relative; width: 100%; overflow: hidden; } #sky{ width: 100%; height: 680px; position:
复制链接

扫一扫

专栏目录