实现文字滚动播放的几种方法

2023-02-27 12:24| 来源: 网络整理| 查看: 265

CSS animation margin-left

第一种方法是使用css 动画方法，使用margin-left属性来控制文字元素距离父元素左侧的距离。现附上源码：

循环滚动播放滴滴答答滴滴答答滴滴答答

CSS部分

.text { margin-left: 0; animation: myscroll 5s linear infinite; } @keyframes myscroll { 0% { margin-left: 0; } 25% { margin-left: -75%; } 50% { margin-left: -150%; } 75% { margin-left: -200%; } 100% { margin-left: -250%; } }

此方法的主要问题在于，margin-left是100%是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度

2.CSS animation transform: translateX();

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

translateX中的-100%是相对于元素自身宽度而言的，因此能够实现向左平移滚动的效果。

3. 使用js scrollLeft

window.onload = function() { let text = document.getElementsByClassName('text')[0]; let container = document.getElementsByClassName('container')[0]; let copy = document.getElementsByClassName('copy')[0]; copy.innerHTML = text.innerHTML; let count = 0; // text.scrollLeft = 0; function loop() { if (copy.offsetWidth

参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft

https://www.cnblogs.com/shizhouyu/p/4462594.html

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章