Vue机场大屏滚动效果(1)

最新推荐文章于 2023-09-25 09:43:02 发布

AmBestToday

最新推荐文章于 2023-09-25 09:43:02 发布

阅读量421

点赞数 1

分类专栏： # Vue 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45828554/article/details/120616628

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue机场大屏滚动效果(1)

效果图：
在这里插入图片描述
把如下的代码，复杂到 html 文件中，并运行，就能看到上图的滚动效果

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

<head>
    <meta charset="UTF-8">
    <title>沿圆形轨迹运动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #trajectory {
            position: relative;
        }

        .box {
            width: 400px;
            margin: 100px auto;
        }

        .box .item {
            height: 30px;
            overflow: hidden;
            border-bottom: 1px solid #ccc;

        }

        .box .item>div {
            height: 30px;
            line-height: 30px;
            transform: translateY(-30px);
            animation: translateDown 2s linear infinite;
        }

        @keyframes translateDown {
            0% {
                transform: translateY(-30px);
            }

            50%,
            100% {
                transform: translateY(0px);
            }

        }
    </style>
</head>

<body>
    <div id="trajectory">
        <div class="box">
            <div class="item">
                <div>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
                  <div>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>
            </div>
            <div class="item">
              
                <div>
                    <span>11</span>
                    <span>12</span>
                    <span>13</span>
                    <span>14</span>
                    <span>15</span>
                </div>
				<div>
                    <span>16</span>
                    <span>17</span>
                    <span>18</span>
                    <span>19</span>
                    <span>20</span>
                </div>
            </div>
            <div class="item">
                
                <div>
                    <span>21</span>
                    <span>22</span>
                    <span>23</span>
                    <span>24</span>
                    <span>25</span>
                </div>
				<div>
                    <span>26</span>
                    <span>27</span>
                    <span>28</span>
                    <span>29</span>
                    <span>30</span>
                </div>
            </div>
            <div class="item">
                
                <div>
                    <span>31</span>
                    <span>32</span>
                    <span>33</span>
                    <span>34</span>
                    <span>35</span>
                </div>
				<div>
                    <span>36</span>
                    <span>37</span>
                    <span>38</span>
                    <span>39</span>
                    <span>40</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

AmBestToday

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue机场大屏滚动效果(1)

Vue机场大屏滚动效果(1)效果图：把如下的代码，复杂到 html 文件中，并运行，就能看到上图的滚动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>沿圆形轨迹运动</title> <style type="text/css"> * { margin: 0;
复制链接

扫一扫