[分享]css制作跑马灯式的标题

CSS制作跑马灯式的标题

 <style>
        .title {
            overflow: hidden;
            white-space: nowrap;
            animation: marquee 5s linear infinite;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
    </style>

    <h1 class="title">这是一个跑马灯式的标题效果</h1> 

以上代码实现了一个CSS制作跑马灯式的标题效果。在CSS中，我们通过设置容器的overflow: hidden;和white-space: nowrap;来隐藏标题超出容器的部分，并保证它在一行内显示。 还通过animation:marquee 5s linear infinite;属性设置了动画效果。动画名称为marquee，持续时间为5秒，线性转换过渡，无限循环。这样就实现了跑马灯标题的效果。