css实现文字滚动

css实现文字滚动

css实现简单的文字横向滚动效果

使用marquee标签当然也可以实现，但是marquee标签已经被淘汰了，一些属性和浏览器不可用

HTML

<!-- css变量说明：--gap:文字段之间的间隔(默认20px)，--time:滚动一段文字的时间(默认3s) -->
<div class="z-text-roll z-is-roll"  style="--gap: 20px;--time: 3s;">
    <span data-text="要滚动的文字要滚动的文字要滚动的文字"></span>
</div>

CSS

.z-text-roll {
    /* 最大宽度 */
    width: 100%;
    /* 不允许换行 */
    white-space: nowrap;
    /* 超出隐藏 */
    overflow: hidden;
    position: relative;
    --gap: 20px;
    --time: 3s;
}
.z-text-roll>span {
    position: relative;
    display: inline-block;
}
.z-text-roll>span::before {
    content: attr(data-text);
    position: relative;
    left: 0;
}
.z-text-roll.z-is-roll>span::before {
    --index:0;
    animation: z-text-anim var(--time) linear infinite;
}
.z-text-roll.z-is-roll>span::after {
    content: attr(data-text);
    position: absolute;
    left: calc(100% + var(--gap));
    --index:1;
    animation: z-text-anim var(--time) linear infinite;
}

@keyframes z-text-anim {
    0% {
        /* --index 为第几个文本 */
        left: calc((100% + var(--gap)) * var(--index));
    }
    100% {
        left: calc((100% + var(--gap)) * (var(--index) - 1));
    }
}
/* 更多 */
.z-text-roll>span>font {
    display: none;
}
.z-text-roll.z-is-roll>span>font {
    display: inline-block;
    position: absolute;
    left: calc((100% + var(--gap)) * 2);
    --index:2;
    animation: z-text-anim var(--time) linear infinite;
}
.z-text-roll.z-is-roll>span>font>span {
    margin-right: var(--gap);
}

文字宽度没有超出容器的问题

如果文字宽度没有超出容器宽度，你可以发现上面的样式将会发送错误

期望继续滚动

如果你想文字的宽度小于容器宽度也继续滚动，你可以多添加几份同样的文字，以让文字的总宽度超出容器的宽度，或者增加一段文字和下一段的文字的间隔--gap: 50px

<div class="z-text-roll z-is-roll" style="--gap: 50px">
    <span data-text="要滚动的文字要滚动的文字要滚动的文字">
        <font>
            <span>要滚动的文字要滚动的文字要滚动的文字</span>
            <span>要滚动的文字要滚动的文字要滚动的文字</span>
            <span>要滚动的文字要滚动的文字要滚动的文字</span>
            <span>要滚动的文字要滚动的文字要滚动的文字</span>
        </font>
    </span>
</div>

利用js判断是否需要滚动

如果你想文字宽度超出容器宽度才开启滚动，你可以使用js进行判断，动态添加classz-is-roll

function initRoll(){
    // 您需要注意这个选择器，需要选中.z-text-roll元素
    let rollBox = document.querySelector('div.z-text-roll')
    let textWidth = rollBox.querySelector(':scope > span').clientWidth
    if(rollBox.clientWidth < textWidth){
        rollBox.classList.add('z-is-roll')
    }else{
        rollBox.classList.remove('z-is-roll')
    }
}
initRoll()

如果你使用vue等框架，需要等待组件渲染完成再调用判断，否则拿不到正确的宽度

// 例如Vue3
onMounted(() => {
    initRoll()
})

如果你绑定的动态的文字，需要监听文字改变，并等待渲染完成的时候重新判断宽度

// 例如Vue3
const text = ref('要滚动的文字')
watch(text, ()=>{
    // 等待渲染完成
    setTimeout(() => {
        initRoll()
    }, 0);
})

如果你的容器宽度是不固定的，你还需要在宽度变化的时候重新判断宽度

dome地址

https://dome.yyzhu.vip/text-roll