使用动画做一个走马灯的案例

发布于:2024-04-22 ⋅ 阅读:(170) ⋅ 点赞:(0)

走马灯

1.第一步-搭建环境

先搭建父盒子。父盒子里面再放入一个子盒子用来装7张图片,有因为图片在一行上了,所以需要使用flex布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯案例</title>
    <style>
        .box {
            /* 在这里的宽度是可以刚刚好放下三张图片的宽度 */
            width: 1137px;
            height: 352px;
            border: 1px solid #000;
            margin: 100px auto  ;
        }
        .main {
            display: flex;
            /* 这里的宽度是七张图片的宽度 */
            width: 2653px;
            height: 352px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 这里放入高度 -->
        <div class="main">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/6.jpg" alt="">
            <img src="./img/7.jpg" alt="">
        </div>
    </div>
</body>
</html>

2.第二步-设计动画

设计动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯案例</title>
    <style>
        .box {
            /* 在这里的宽度是可以刚刚好放下三张图片的宽度 */
            width: 1137px;
            height: 352px;
            border: 5px solid #000;
            margin: 100px auto;
            /* 让超出的部分隐藏 */
            overflow: hidden;
        }

        .main {
            display: flex;
            /* 这里的宽度是七张图片的宽度 */
            width: 2653px;
            height: 352px;
            /* liner匀速 */
            animation: move 10s linear infinite;
        }

        img {
            width: 379px;
            height: 352px;
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                /* 移动四个图片,这样就刚好显示最后三张图片 */
                transform: translateX(-1516px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 这里放入高度 -->
        <div class="main">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/6.jpg" alt="">
            <img src="./img/7.jpg" alt="">
        </div>
    </div>
</body>

</html>

但是这样还是会有一些问题,就是会抽一下,给用户的视觉体验感不好,为什么会抽一下呢?因为到567图片的时候,一下子又回到了123图片。所以动画的设计还是有点问题。

3.第三步-完善问题

在结构上补充假的123图片。

在动画上需要移动7格盒子。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯案例</title>
    <style>
        .box {
            /* 在这里的宽度是可以刚刚好放下三张图片的宽度 */
            width: 1137px;
            height: 352px;
            border: 5px solid #000;
            margin: 100px auto;
            /* 让超出的部分隐藏 */
            overflow: hidden;
        }

        .main {
            display: flex;
            /* 这里的宽度是七张图片的宽度 */
            /* width: 2653px; */
            /* 根据提出的问题,这里需要修改为10张图片的宽度 */
            width: 3790px;
            height: 352px;
            /* liner匀速 */
            animation: move 10s linear infinite;

        }

        .main:hover {
            animation-play-state: paused;
        }

        img {
            width: 379px;
            height: 352px;
        }

        .box:hover {
            animation-play-state: paused;
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-2653px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 这里放入高度 -->
        <div class="main">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/6.jpg" alt="">
            <img src="./img/7.jpg" alt="">
            <!-- 假的123 用来使的图片跑起来丝滑 -->
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
</body>

</html>

注意:本文章是笔者的学习笔记,因为笔者的能力有限,会出现很多没有想过的问题,所以,如果您在浏览或者运行代码的时候出现问题,请在评论区留言,笔者看到后会在第一时间处理,谢谢。


网站公告

今日签到

点亮在社区的每一天
去签到