⽂字跑马灯（⽆缝衔接）CSS+JS完美实现
最近要做⼀个系统公告的跑马灯效果，在⽹上了很多，发现有js和css的⽅法，但是都不太好⽤。所以⾃⼰结合了⼀下，做
了个css+js的跑马灯效果。如果觉得好⽤或者发现问题，欢迎评论沟通哈~
本来是vue+ts的，我改成了纯html+css+js的⽅式，⼤家想改成什么的也都⽅便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⽂字跑马灯 CSS+JS完美实现</title>
<style type="text/css">
.box {
width: 50%;
overflow: hidden;
color: #fff;
background-color: #000;
white-space: nowrap;
}
.content {
animation: move 5s linear infinite;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="content">测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测
试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来测测试测试测试测试测试测试起来跑起来跑起来起来跑起来跑起来</div>
</div>
<script>
scroll();
function scroll() {
createStyle();
let content = document.querySelector('.content');
let box = document.querySelector('.box');
let contentWidth = content.offsetWidth;
let boxWidth = box.offsetWidth;
if ( contentWidth < boxWidth ) {
// 内容宽度⼩于盒⼦宽度，停⽌滚动
content.style.setProperty('animation','0s');css和html和js怎么结合
}else {
// 根据宽度设置滚动距离和动画时长

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。