1129案例-走马灯，全民出游

最新推荐文章于 2024-10-08 09:33:56 发布

与生俱来123

最新推荐文章于 2024-10-08 09:33:56 发布

阅读量160

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_62919289/article/details/128098114

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

这篇博客展示了两个HTML案例，一是走马灯效果，通过CSS实现图片向左平滑移动，实现产品展示区域的循环滚动；二是创建了动态云朵和底部元素的动画效果，利用CSS关键帧动画改变图片位置，营造出云朵飘动和底部元素上升的视觉效果，增强了页面的动态感和趣味性。

摘要由CSDN通过智能技术生成

案例走马灯

产品多，区域放不下

代码

</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
        
    }
    img {
        width: 200px;
    }
    .box {
        width: 600px;
        height: 112px;
        border: 5px solid gray;
        margin: 10px auto;
        /*溢出盒子外的不显示*/
        overflow: hidden;
    }
    .box ul {
        width: 2000px;
        animation: move 3s infinite ;
        
    }
    .box li {
        float: left;
    }

    /*定义动画位移ul,左侧移动7张图片，-1400px*/
    @keyframes move {
        to {
        transform: translateX(-1400px);
        }
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
            <li><img src="./image/5.jpg" alt=""></li>
            <li><img src="./image/6.jpg" alt=""></li>
            <li><img src="./image/7.jpg" alt=""></li>
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/1.jpg" alt=""></li>
            <li><img src="./image/2.jpg" alt=""></li>
            <li><img src="./image/3.jpg" alt=""></li>
            <li><img src="./image/4.jpg" alt=""></li>
        </ul>
    </div>
</body>

效果，几个图动画向左移动

案例全民出游

html

<body>
    <!--云朵图片-->
    <div class="cloud">
        <img src="./image/yun1.png" alt="">
        <img src="./image/yun2.png" alt="">
        <img src="./image/yun3.png" alt="">
    </div>

    <!--dibu-->
    <div class="bottom">
        <img src="./image/1.png" alt="">
        <img src="./image/2.png" alt="">
        <img src="./image/3.png" alt="">
        <img src="./image/4.png" alt="">
    </div>
</body>

css

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    height: 100%;
    background: url(./image/f1_1.jpg) no-repeat center 0;
    /*缩放背景图*/
    background-size: cover;
}

/*云朵*/
.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
}

.cloud img:nth-child(1) {
    top: 20px;
    margin-left: -300px;
    animation: cloud 1s infinite alternate;
}
.cloud img:nth-child(2) {
    top: 200px;
    margin-left: -400px;
    animation: cloud 3s infinite;
}
.cloud img:nth-child(3) {
    top: 30px;
    margin-left: 200px;
    animation: cloud 2s infinite;
}

@keyframes cloud {
    to {
        transform: translateX(50px);
    }
}

/*底部*/
.bottom img {
    position: absolute;
    left: 50%;
    bottom: 35px;
}

.bottom img:nth-child(1) {
    bottom: 35px;
    left: 575px;
    animation: bottom 1s infinite;
}
.bottom img:nth-child(2) {
    bottom: 35px;
    left: 345px;
    animation: bottom 1s infinite 1s forwards;
}
.bottom img:nth-child(3) {
    bottom: 35px;
    left: 810px;
    animation: bottom 1s infinite 2s forwards;
}
.bottom img:nth-child(4) {
    bottom: 35px;
    left: 1042px;
    animation: bottom 1s infinite forwards;
}
@keyframes bottom {
    to {
        transform: translateY(-30px) ;
    }
}