设置动画，盒子并未滚动：
@keyframes marquee {
to {
transform: translateX(min(100cqw - 100%, 0px));
}
}
直接运行此代码可以实现文本溢出滚动：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.marquee {
display: flex;
text-align: center;
justify-content: center;
position: relative;
overflow: hidden;
white-space: nowrap;
width: 200px;
padding: 2px 4px;
background-color: salmon;
resize: horizontal;
container-type: inline-size;
.tttt{
animation: marquee 3s linear infinite both alternate;
}
}
@keyframes marquee {
to {
transform: translateX(min(100cqw - 100%, 0px));
}
}
</style>
</head>
<body>
<div class="marquee">
<div class="tttt">hello, what r u doing right now?</div>
</div>
</body>
</html>
