前端 css3 css实现文字滚动

css实现文字滚动HTMLCSS文字宽度没有超出容器的问题期望继续滚动利用js判断是否需要滚动

dome地址

css实现文字滚动

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

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

HTML

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

利用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

精彩文章

 您阅读本篇文章共花了：