用html和css制作全面出游网页（B站黑马程序员），自制思路与总结（下）

接下来我们需要制作最后面的东西，分别是长颈鹿，热气球，以及下面的四个小标题

首先，我的思路是长颈鹿和热气球是两个div盒子，而下面的四个标签应该算一个ul嵌套li的结构

我们首先先做热气球和长颈鹿，我们发现它其实是压在文字图片周围的，我们这时就需要加入position，我们还是将图片调整至中间然后去网页中进行调整测试

最后得到的内容代码就完成了图片的定位，接下来我们需要制作热气球上下移动的动画

.ballon img{
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -390px;
}

.giraffe img{
    position: absolute;
    left: 50%;
    top: 15%;
    margin-left: 160px;
}

我们只需要将热气球图片沿着Y轴上下运动即可

@keyframes ballon{
    form{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-30px);
    }
}

接下来我们去制作四个标签文字，但是我在编写过程中发现，如果我使用了ul嵌套li的话，四张图片会因为没有合适的高无法放下来

.jump-text ul{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

这不行，那我们还是只能直接用div标签进行编写

        <div class="jump-text">
            <img src="images/1.png" alt="">
            <img src="images/2.png" alt="">
            <img src="images/3.png" alt="">
            <img src="images/4.png" alt="">
        </div>

之后还是老样子制作动画，调整图片位置。一开始我使用的是flex，但是发现用上position函数会让图片重叠，效果还是需要自己添加间距所以还是去掉了

.jump-text img{
    position: absolute;
    left: 50%;
    bottom: 42px;
    width: 100px;
}
.jump-text img:nth-child(1){
    margin-left: -420px;
    animation: jump-text 0.8s infinite alternate;
}
.jump-text img:nth-child(2){
    margin-left: -180px;
    animation: jump-text 0.8s  0.2s infinite alternate;
}
.jump-text img:nth-child(3){
    margin-left: 65px;
    animation: jump-text 0.8s  0.4s infinite alternate;
}
.jump-text img:nth-child(4){
    margin-left: 308px;
    animation: jump-text 0.8s  0.6s infinite alternate;
}
@keyframes jump-text{
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(-30px);
    }
}

结束，这次还是非常简单的，没有啥需要注意的，主要是因为知识点需要记的比较多，前面所学的内容很容易忘，还得不断巩固。这次使用的有子绝父相position，动画animation，位移transform，margin外边距等。