我的移动代码有问题，一旦它到达屏幕的相反方向(左(，就会一直被剪切。
我使用的是Wix(不幸的是(，其中代码需要通过URL的小部件加载。不过我已经解决了——所以这不应该是问题所在。我认为这是代码，因为它在桌面上完美地工作。
我可以使用的最大像素宽度——或者更确切地说，应该使用的是325像素，因此是宽度。
下方的CSS
@font-face {
font-family: 'akira';
src: url('./assets/142-webfont.woff2') format('woff2'),
url('./assets/142-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.marquee {
width: 325;
background: rgba(0, 0, 0, 0);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
}
.marquee div {
font-size: 12px;
font-family: 'akira';
padding-left: 100%;
display: inline-block;
animation: animate 20s linear infinite;
}
@keyframes animate {
100% {
transform: translate(-100%, 0);
}
}
HTML此处
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="marquee">
<div>As of current, Ytems®, is a non-profit organization.
We sell our products at a breakeven profit.
Enjoy designer apparel for minimum costs. </div>
</div>
</html>
根据需要将字幕宽度更改为100%或325px。下面有两个片段，一个是100%，另一个是325px。参见.marquee中的注释。
@font-face {
font-family: 'akira';
src: url('./assets/142-webfont.woff2') format('woff2'), url('./assets/142-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.marquee {
width: 100%; /*--------------------- changed from 325 (invalid) to 100%*/
background: rgba(0, 0, 0, 0);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
}
.marquee div {
font-size: 12px;
font-family: 'akira';
padding-left: 100%;
display: inline-block;
animation: animate 20s linear infinite;
}
@keyframes animate {
100% {
transform: translate(-100%, 0);
}
}<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="marquee">
<div>As of current, Ytems®, is a non-profit organization. We sell our products at a breakeven profit. Enjoy designer apparel for minimum costs. </div>
</div>
</html>我看到你在你的问题中提到，你希望它是325像素宽。您的width: 325设置无效。我在下面的代码段中将其更改为width: 325px：
@font-face {
font-family: 'akira';
src: url('./assets/142-webfont.woff2') format('woff2'), url('./assets/142-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.marquee {
width: 325px; /*--------------------- changed from 325 (invalid) to 325px */
background: rgba(0, 0, 0, 0);
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
}
.marquee div {
font-size: 12px;
font-family: 'akira';
padding-left: 100%;
display: inline-block;
animation: animate 20s linear infinite;
}
@keyframes animate {
100% {
transform: translate(-100%, 0);
}
}<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="marquee">
<div>As of current, Ytems®, is a non-profit organization. We sell our products at a breakeven profit. Enjoy designer apparel for minimum costs. </div>
</div>
</html>