css3实现简单的白云飘动背景特效

下面是“CSS3实现简单的白云飘动背景特效”的完整攻略。

1. 准备工作

在开始实现云朵飘动的背景特效之前，需要准备好以下内容：

一张背景图片，建议使用带有白云的风景图片作为背景;
一些云朵图片，可以从网络上下载一些免费的云朵图片。如果没有合适的，可以自己手动绘制简单的云朵;
HTML页面，需要在页面中添加背景图片，并将云朵通过CSS3实现飘动特效;
CSS样式文件，需要实现云朵飘动的CSS动画。

2. 实现过程

2.1 HTML代码

首先，将背景图片添加到HTML页面的body标签中：

<body style="background:url(bg.jpg) no-repeat center center fixed;">

2.2 CSS样式

接下来，在CSS样式文件中添加以下代码：

.cloud{
    position: absolute;
    z-index: -1;
    top: 100px;
    left: -200px;
    opacity: 0.8;
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}
.cloud2{
    position: absolute;
    z-index: -1;
    top: 40px;
    left: -200px;
    opacity: 0.8;
    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}
.cloud3{
    position: absolute;
    z-index: -1;
    top: 250px;
    left: -200px;
    opacity: 0.8;
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}
@-webkit-keyframes moveclouds {
    0% {left: -200px;}
    100% {left: 100%;}
}
@-moz-keyframes moveclouds {
    0% {left: -200px;}
    100% {left: 100%;}
}
@-o-keyframes moveclouds {
    0% {left: -200px;}
    100% {left: 100%;}
}

上述代码可以在CSS样式中实现云朵的飘动。其中，.cloud、.cloud2、.cloud3是三个不同的云朵，通过不同的css属性控制云朵的大小和位置。关键的是通过@-webkit-keyframes、@-moz-keyframes、@-o-keyframes实现云朵运动的动画。

2.3 添加云朵图片

最后，在HTML中添加云朵图片并设置相应的class名，例如：

<img class="cloud" src="cloud.png">
<img class="cloud2" src="cloud.png">
<img class="cloud3" src="cloud.png">

这样云朵就可以飘动了。如果需要添加更多的云朵，可以复制上述代码并修改class名和云朵的位置等属性。

2.4 页面效果

下面是一个简单的示例，你可以在浏览器中打开查看效果：

<!DOCTYPE html>
<html>
<head>
    <title>白云飘动背景特效</title>
    <style>
        .cloud{
            position: absolute;
            z-index: -1;
            top: 100px;
            left: -200px;
            opacity: 0.8;
            -webkit-animation: moveclouds 15s linear infinite;
            -moz-animation: moveclouds 15s linear infinite;
            -o-animation: moveclouds 15s linear infinite;
        }
        .cloud2{
            position: absolute;
            z-index: -1;
            top: 40px;
            left: -200px;
            opacity: 0.8;
            -webkit-animation: moveclouds 20s linear infinite;
            -moz-animation: moveclouds 20s linear infinite;
            -o-animation: moveclouds 20s linear infinite;
        }
        .cloud3{
            position: absolute;
            z-index: -1;
            top: 250px;
            left: -200px;
            opacity: 0.8;
            -webkit-animation: moveclouds 25s linear infinite;
            -moz-animation: moveclouds 25s linear infinite;
            -o-animation: moveclouds 25s linear infinite;
        }
        @-webkit-keyframes moveclouds {
            0% {left: -200px;}
            100% {left: 100%;}
        }
        @-moz-keyframes moveclouds {
            0% {left: -200px;}
            100% {left: 100%;}
        }
        @-o-keyframes moveclouds {
            0% {left: -200px;}
            100% {left: 100%;}
        }
    </style>
</head>
<body style="background:url(https://images.unsplash.com/photo-1445346366695-5bf62de05412) no-repeat center center fixed;">
    <img class="cloud" src="https://www.w3schools.com/w3css/img_lights.jpg">
    <img class="cloud2" src="https://www.w3schools.com/w3css/img_lights.jpg">
    <img class="cloud3" src="https://www.w3schools.com/w3css/img_lights.jpg">
</body>
</html>

上述代码实现了三朵云朵在一张风景图片背景上的飘动效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css3实现简单的白云飘动背景特效 - Python技术站