使用HTML5制作云层效果

最新推荐文章于 2024-09-08 19:43:23 发布

原创最新推荐文章于 2024-09-08 19:43:23 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #云层效果 #animation

CSS3 专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用纯CSS实现一个具有动画效果的云朵背景，通过关键帧动画让不同云朵以不同速度从屏幕左侧飘动到右侧，同时背景颜色也会随时间变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            height: 400px;
            margin-top: 100px;
            background-color: skyblue;
            position: relative;
            animation:change 5s linear 0s infinite alternate;
            overflow: hidden;
        }
        li{
            list-style: none;
            position: absolute;
            height: 100%;
            width: 400%;
            left: -300%;
            top: 0;
        }
        li:nth-child(1){
            background-image: url("images-100/cloud_one.png");
            animation:one 30s linear 0s  infinite alternate;
        }
        li:nth-child(2){
            background-image: url("images-100/cloud_two.png");
            animation:two 30s linear 0s  infinite alternate;
        }
        li:nth-child(3){
            background-image: url("images-100/cloud_three.png");
            animation:three 30s linear 0s  infinite alternate;
        }
        @keyframes change{
            from{
                background-color: skyblue;
            }to{
            background-color: #000000;
                         }
        }
        @keyframes one{
            from{
                left: -300%;
            }to{
            left: 0%;
                         }
        }
        @keyframes two{
            from{
                left:-200%;
            }to{
            left: 0%;
                         }
        }
        @keyframes three{
            from{
                left:-100%;
            }to{
                 left: 0%;
             }
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>**

![图片](https://img-blog.youkuaiyun.com/20170323165754003?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXRodW5zZXg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![图片](https://img-blog.youkuaiyun.com/20170323165909289?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXRodW5zZXg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![图片](https://img-blog.youkuaiyun.com/20170323165926540?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXRodW5zZXg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)