06 - CSS3 - 云层动画效果

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

---

< ! ---------- HTML ----------- >

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

< ! --------- Style --------------- >

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

        position: relative;
    }
    @keyframes sky {
        from{
            background-color: skyblue;
        }
        to{
            background-color: black;
        }
    }
    ul li{
        list-style: none;
        width:400%;
        height: 400px;
        position: absolute;
        left: 0;
        top: 0;
    }
    ul li:nth-child(1){
        background: url("素材/cloud_one.png");
        animation: oneSport 30s linear 0s infinite alternate;
    }
    ul li:nth-child(2){
        background: url("素材/cloud_two.png");
        animation: twoSport 30s linear 0s infinite alternate;
    }
    ul li:nth-child(3){
        background: url("素材/cloud_three.png");
        animation: threeSport 30s linear 0s infinite alternate;
    }
    
    @keyframes oneSport {
        from{
            left: 0;
        }
        to{
            left:-100%;
        }
    }
    @keyframes twoSport {
        from{
            left: 0;
        }
        to{
            left: -200%;
        }
    }
    @keyframes threeSport {
        from{
            left: 0;
        }
        to{
            left: -300%;
        }
    }
</style>

< ! --------- 效果展示 ---------- >

• 运行在电脑上不卡,可能是截图的工具渲染不出来那种效果吧! 可以把代码放编辑器运行看看真实的效果

**云层特效**