用html和css制作全面出游网页（B站黑马程序员），自制思路与总结（上）_做全民出游季基础版本作业,效果如图。其中云彩做左右移动的动画,标题文字处于网页-优快云博客

本文链接：https://blog.youkuaiyun.com/huzhanxiao/article/details/141821079

开始，建立总文件夹里面分成三个部分css,img,主网页，这有助于我们理清自己的思路

我们来看看我们需要做到的效果

首先，它需要三朵小云拥有可循环的动画效果，然后就是网页中间的文字也需要一个动画效果，它需要进行一个缩放

我们先建立大背景，因为大背景是全部的，所以我们设置在body里面，我设置的高为100%，然后设置了背景图片和不平铺，还有背景居中，以及全覆盖

css

/* 大背景 */
html{
    height: 100%;
}
body{
    display: block;
    height: 100%;
    background: pink url(../images/f1_1.jpg) no-repeat center 0 / cover;
}

我还设置了html的高，因为cover是以盒子的高来作为覆盖的范围，单设置一个body不生效会出现

覆盖不完全的效果

所以一定要加上html的高

我们从上到下进行编写，接下来就到三朵小云了，三朵云对应三个图片，不需要我们特意的去设置宽高，我们只需将云朵先放到中间再进行上下左右的调高就可以了

注意：如果你使用了bass初始化，里面img属性会使图片覆盖平铺

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
        <!-- 云 -->
        <div class="could">
            <img src="./images/yun1.png" alt="">
            <img src="./images/yun2.png" alt="">
            <img src="./images/yun3.png" alt="">
        </div>
</body>
</html>

css

/* 云 */
.could img{
    position: absolute;
    left: 50%;
}
.could img:nth-child(1){
    margin-left: -250px;
    margin-top: 20px;
}
.could img:nth-child(2){
    margin-left: 400px;
    margin-top: 100px;
}
.could img:nth-child(3){
    margin-left: -550px;
    margin-top: 200px;
}

接下来我们需要给云彩加上动画,我们为了使云彩运动流畅，我添加了循环加反向，并且为了使云朵在不同时间进行运动，我使用了延时

css

.could img:nth-child(1){
    margin-left: -250px;
    margin-top: 20px;
    animation: could 1s infinite alternate;
}
.could img:nth-child(2){
    margin-left: 400px;
    margin-top: 100px;
    animation: could 1s infinite alternate 0.6s;
}
.could img:nth-child(3){
    margin-left: -550px;
    margin-top: 200px;
    animation: could 1s infinite alternate 0.4s;
}
@keyframes could{
    form {
        transform: 0;
    }
    to{
        transform: translateX(20px);
    }
}

接下来我们进行大标题的编写，首先我们知道大标题是有缩放效果的，它是从一个小的图片变成一张大图的，先让图片进行绝对居中，然后让我们看它的动画效果，它中间有三个步骤，我们需要让它有一种回弹的效果我们需要将它进行三次变化，分别是原始-变小-变大-原始

注意：transfrom会被最后的覆盖不能单写sacle

.text img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: text 1s ;
    
}
@keyframes text{
    0%{
        transform: translate(-50%,-50%) scale(1);
    }
    20%{
        transform: translate(-50%,-50%) scale(0.1)
    }
    60%{
        transform: translate(-50%,-50%) scale(1.4)
    }
    100%{
        transform: translate(-50%,-50%) scale(1)
    }
}

这样我们的初始就完成了，因为不能发视频，体现不出网页的效果，需各位自己去尝试