云层动画

最新推荐文章于 2021-09-03 20:55:52 发布

甜甜今天学了吗

最新推荐文章于 2021-09-03 20:55:52 发布

阅读量154

点赞数

文章标签： CSS、HTML

本文链接：https://blog.csdn.net/dawanhjiao/article/details/103305771

版权

云层动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云层动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            position: relative;
            height: 400px;
            width: 100%;
            background-color: skyblue;
            /*margin-*/top: 100px;
            animation: cloud 5s linear 0s infinite alternate;/*infinite动画永远播放   alternate:动画需要往返*/
            overflow: hidden;/*把超过的li隐藏起来，因为如果不隐藏的话网页下面会出现滚动条*/
        }
        @keyframes cloud {
            from{
                background-color: skyblue;
            }
            to{
                background-color: black;
            }
        }
        ul li{
            position: absolute;
            /*宽度变成ul的4倍，但默认情况下，扩展元素只会向右边扩展*//*4倍是因为最大的要移300%，不想ul空出来的话，li就要是ul的4倍宽*/
            width: 400%;
            height: 100%;
            list-style: none;
        }
        ul li:nth-child(1){
            background-image: url("image/cloud_one.png");
            animation: one 30s linear 0s infinite alternate;
        }
        ul li:nth-child(2) {
            background-image: url("image/cloud_two.png");
            animation: two 30s linear 0s infinite alternate;
        }
        ul li:nth-child(3){
            background-image: url("image/cloud_three.png");
            animation: three 30s linear 0s infinite alternate;
        }
        @keyframes one {
            from {
                margin-left: 0;/*left: 0;*//*right:-300% ;*/
                /*不能用margin-right是因为浏览器默认从左往右渲染元素的，在没有超出父容器宽度的前提下，
                如果子容器的宽度能够被容纳，设置margin-right是无用的*/
            }
            to {
                /* 因为默认情况下扩展宽度是往右边增加，也就是说li是向右扩展的，所以li要向左移才不会让ul留有空白*/
                margin-left: -100%;/*left: -100%;*/ /*right: -200%;*/
            }
        }
        @keyframes two {
            from{
                margin-left: 0;/*left: 0;*//*right: -300%;*/
            }
            to{
                margin-left: -200%;/*!left: -200%;*//*right: -100%;*/
            }
        }
        @keyframes three {
            from{
                margin-left: 0;/*left: 0;*//*right: -300%;*/
            }
            to{
                margin-left: -300%;/*left: -300%;*//*right: 0;*/
            }
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>