vue 滚动公告

最新推荐文章于 2024-04-07 21:53:21 发布

胜杰720

最新推荐文章于 2024-04-07 21:53:21 发布

阅读量223

点赞数

文章标签： vue.js css css3

本文链接：https://blog.csdn.net/weixin_71574589/article/details/133941026

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .notice-con {
            width: 342px;
            height: 24px;
            line-height: 24px;
            margin: 0 auto 15px;
            color: #fff;
            font-size: 12px;
            overflow: hidden;
            background: url("notice.png") no-repeat center;
            background-size: contain;
        }

        .notice-main-con {
            margin: 0 16px 0 25px;
            overflow: hidden;
        }

        .notice-main {
            display: inline-block;
            width: auto;
            white-space: nowrap;
        }

        .notice {
            display: block;
            -moz-animation: move 2s infinite linear;
            -webkit-animation: move 2s infinite linear;
            animation: move 2s infinite linear;
        }

        .notice>span {
            color: #FFD460;
        }

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

            50% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

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

            50% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

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

            50% {
                transform: translateX(0);
            }

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

<body>
    <div class="notice-con">
        <div class="notice-main-con">
            <div class="notice-main">
                <span class="notice">
                    <span>好不错已占据</span>
                </span>
            </div>
        </div>
    </div>
</body>

</html>