css动画实例-云层飞机

32F  2018/10/10 css



实例代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        height: 227px;
        background-color: skyblue;
        margin-top: 150px;
        animation: sky 120s linear 0s infinite alternate;

        position: relative;
    }
    @keyframes sky {
        from{
            background-color: skyblue;
        }
        to{
            background-color: #323232;
        }
    }
    ul li{
        list-style: none;
        width:400%;
        height: 227px;
        position: absolute;
        left: 0;
        top: 0;
    }


    ul li:nth-child(1){
        background: url("https://www.wailian.work/images/2018/10/10/o_cloud_one.png");
        animation: oneSport 240s linear 0s infinite ;
    }
    ul li:nth-child(2){
        background: url("https://www.wailian.work/images/2018/10/10/o_cloud_two.png");
        animation: twoSport 240s linear 0s infinite ;
    }
    ul li:nth-child(3){
        background: url("https://www.wailian.work/images/2018/10/10/o_cloud_three.png");
        animation: threeSport 240s linear 0s infinite ;
    }
    ul li:nth-child(4){
        background: url("https://www.wailian.work/images/2018/10/10/plane.png");
        animation: fourSport 60s linear 0s infinite ;
    }
    ul li:nth-child(5){
        background: url("https://www.wailian.work/images/2018/10/10/plane2.png");
        animation: fiveSport 40s linear 0s infinite ;
    }


    @keyframes oneSport {
        from{
            left: 0;
        }
        to{
            left:-100%;
        }
    }
    @keyframes twoSport {
        from{
            left: 0;
        }
        to{
            left: -200%;
        }
    }
    @keyframes threeSport {
        from{
            left: 0;
        }
        to{
            left: -300%;
        }
    }
    @keyframes fourSport {
        from{
            left: 0;
        }
        to{
            left:-300%;
        }
    }
    @keyframes fiveSport {
        from{
            left: 0;
        }
        to{
            left:-300%;
        }
    }

</style>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

动画效果


  gif 屏幕录制所以看起来没那么流畅,用代码实际体验下

  plane.gif


添加评论
全部回复
暂无回复