纯CSS实现公告滚动栏效果图：原理通过动画关键帧实现，可以动态传一个时间来限制滚动的速度。上代码：补充 marq

效果图：

原理

通过动画关键帧实现，可以动态传一个时间来限制滚动的速度。

上代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            background-repeat: no-repeat;
        }

        .sound {
            width: 1200px;
            height: 38px;
            background-color: #e9e4f5;
            color: #000;
            border-radius: 20px;
            margin: 20px auto;
            display: flex;
            gap: 10px;
            overflow: hidden;
            line-height: 37px;
            align-items: center;
        }

        .sound .box {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .text {
            animation: slideLeft 10s linear infinite;
            display: inline-block;
            white-space: nowrap;
            left: 100%;
            top: 0;
            position: absolute;
            cursor: pointer;
        }

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

        @keyframes slideLeft {
            0% {
                left: 100%;
            }

            100% {
                left: -100%;
            }
        }
    </style>
</head>

<body>
    <div class="sound">
        <div class="box">
            <p class="text" id="myParagraph">欢迎来到「博客的文章」，一个小小的赞和留言也是博主最大的动力<a
                    href="https://fanyi.baidu.com/mtpe-individual/multimodal?query=%E6%AF%94%E8%B5%9B&lang=zh2en">了解详情</a>
            </p>
        </div>
    </div>
</body>

</html>

补充

marquee是原生支持的跑马灯元素，但不推荐使用，因为已被移除web 标准。

<!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>
        .advertising-box {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            z-index: 99;
            display: flex;
            align-items: center;
            height: 44px;
            background: #6E43B1;
            padding: 0 50px;
            position: relative;
        }

        .advertising-box-h5 {
            display: none;
        }

        .advertisingTitle-icon {
            width: 1px;
            height: 12px;
            border: 1px solid #FFFFFF;
            margin-right: 10px;
        }

        .advertisingTitleImg {
            width: 10px;
            height: 16px;
        }

        .advertisingRightBtn {
            width: 72px;
            height: 22px;
            background: #FFFFFF;
            border-radius: 5px;
            position: absolute;
            right: 50px;
            color: #6E43B1;
            font-size: 14px;
            line-height: 22px;
            text-align: center;
        }

        .advertisingTitle {
            width: 67px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 20px;
            padding: 0 10px;

        }

        .text-container {
            vertical-align: middle;
        }

        .advertisingText {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: rgb(204 222 2);
            line-height: 44px;
        }

        .advertisingText:hover {
            color: rgba(255, 255, 255, 0.85);
        }

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

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

<body>
    <div class="advertising-box">
        <marquee direction="left" scrolldelay="5" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"
            class="text-container">
            <a class="advertisingText" href="/index/690.jhtml" style="animation-duration: 35.48s;">
                美股的交收周期將縮短至T+1日 及 美國證監會交易徵費調整 |
                自2024年5月28日起，美股交易交收周期將由T+2縮短至T+1，以提升市場效率並降低風險。此外，自5月20日起，美國證監會交易徵費（僅適用於美股沽出）將由0.0008%上調至0.00278%，每筆最低收費0.01美元保持不變。
            </a>
        </marquee>
    </div>
</body>

</html>