前端CSS3文字滚动轮播(项目中遇到的问题)

最新推荐文章于 2024-01-31 21:56:38 发布

龙马啊

最新推荐文章于 2024-01-31 21:56:38 发布

阅读量1k

点赞数

分类专栏：项目遇到的问题学习过程文章标签：前端 css3

本文链接：https://blog.csdn.net/qq_43853213/article/details/125686061

版权

学习过程同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

项目遇到的问题

15 篇文章 0 订阅

订阅专栏

这个东西拖了好久，之前就打算更的，了解一下，自己写出来发现还是很简单的。

我还记得第一次接触它，当时react里面引用swiper第三方库，一直有问题。然后一直死磕，
最后被提醒可以用css3 样式来实现轮播滚动。

在这里插入图片描述

简单的写了下面的代码，注意一下
tip : margin-top: -400px; 这个的 400 是所有只存在一分数据中 ul 的高度，再加上 margin-top = 10 就是390 + 10 为了满足一直循环我是复制了一份li 数据

在这里插入图片描述

<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>Document</title>
    <style>
        html,
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            margin: 200px auto;
            overflow: hidden;

        }

        ul {
            list-style: none;
            width: 100%;
            animation: show 5s linear infinite;
        }

        ul li {
            text-align: center;
            margin: 10px 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: #ccc;

        }

        ul li:nth-child(1) {
            margin: 0;
        }

        @keyframes show {
            0% {
                margin-top: 0px;
            }

            100% {
                margin-top: -400px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>

            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

这里我遇到了一个数据深拷贝的问题
我把这个循环滚动封装成一个组件，在react中肯定要给 key 值，我们从后端获取到了一份数据，但是我们是需要两份数据的，所以我们把两份数据利用深拷贝，放入DOM元素里面

龙马啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端CSS3文字滚动轮播(项目中遇到的问题)

这个东西拖了好久，之前就打算更的，了解一下，自己写出来发现还是很简单的。我还记得第一次接触它，当时react里面引用swiper第三方库，一直有问题。然后一直死磕，最后被提醒可以用css3 样式来实现轮播滚动。简单的写了下面的代码，注意一下这里我遇到了一个数据深拷贝的问题...
复制链接

扫一扫