英文:
How to do with css that the text doesn't stop?
问题
I want to make a text that is constantly moving.
我想制作一个不断移动的文本。
I've seen an example and I liked it, but I tried to modify it and it broke it.
我看过一个示例，我很喜欢它，但我尝试修改它后它出现问题。
Now the text that rotates through two different planes, but is not continuous, is hidden but the continuation of the sentence does not appear.
现在文本在两个不同的平面上旋转，但不是连续的，文本被隐藏，但句子的延续部分不出现。
To give an example, it is as if a train of 6 wagons goes around a circuit, but in some sections only 3 or 4 of the wagons appear.
举个例子，就好像一列由6辆车厢组成的火车在一个环形轨道上行驶，但在某些部分只有3或4辆车厢出现。
You can see the example.
您可以看到示例。
The idea is that the text does not stop rotating but in a more realistic and continuous way, now the sentence is broken.
这个想法是让文本以更真实和连续的方式不停地旋转，现在句子被打断了。
How can this be corrected so that the sentence always looks complete?
如何才能纠正这个问题，使句子始终完整显示？
What must be done so that the text does not stop and the sentence is always continuous?
为了让文本不停止，并且句子始终连续显示，必须采取什么措施？
I have tried to increase the size of the planes, but it does not work, the sentence is broken anyway.
我尝试增加平面的尺寸，但不管怎么做，句子都被打断了。
Thank you.
谢谢。
英文:
I want to make a text that is constantly moving.
I've seen an example and I liked it, but I tried to modify it and it broke it.
Now the text that rotates through two different planes, but is not continuous, is hidden but the continuation of the sentence does not appear.
To give an example, it is as if a train of 6 wagons goes around a circuit, but in some sections only 3 or 4 of the wagons appear
You can see the example.
The idea is that the text does not stop rotating but in a more realistic and continuous way, now the sentence is broken
How can this be corrected so that the sentence always looks complete?
What must be done so that the text does not stop and the sentence is always continuous?
I have tried to increase the size of the planes, but it does not work, the sentence is broken anyway
Thank you
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: navajowhite;
}
.box {
display: flex;
}
.box .inner {
width: 600px;
height: 300px;
line-height: 300px;
font-size: 6em;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.box .inner:first-child {
background-color: indianred;
color: darkred;
transform-origin: right;
transform: perspective(100px) rotateY(-15deg);
}
.box .inner:last-child {
background-color: lightcoral;
color: antiquewhite;
transform-origin: left;
transform: perspective(100px) rotateY(15deg);
}
.box .inner span {
position: absolute;
animation: marquee 5s linear infinite;
}
.box .inner:first-child span {
animation-delay: 3.5s;
left: -100%;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>texto en 3D</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="inner">
<span>welcome to my restaurant</span>
</div>
<div class="inner">
<span>welcome to my restaurant</span>
</div>
</div>
</body>
</html>
<!-- end snippet -->
I have modified the style file without success
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: navajowhite;
}
.box {
display: flex;
}
.box .inner {
width: 600px;
height: 300px;
line-height: 300px;
font-size: 6em;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.box .inner:first-child {
background-color: indianred;
color: darkred;
transform-origin: right;
transform: perspective(100px) rotateY(-15deg);
}
.box .inner:last-child {
background-color: lightcoral;
color: antiquewhite;
transform-origin: left;
transform: perspective(100px) rotateY(15deg);
}
.box .inner span {
position: absolute;
animation: marquee 5s linear infinite;
}
.box .inner:first-child span {
animation-delay: 3.5s;
left: -100%;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%;
}
}
答案1
得分: 1
.box 元素的宽度已经扩展到 1200px，并且赋予了 1000px 的透视值。.box .inner 元素上的 transform-origin 属性已经调整，以将文本位置调近到盒子前端，防止其消失在侧边。
在.box .inner的 span 元素上，动画属性已经减慢到 20 秒，并且 @keyframes 规则中的起始值和结束值已经更改为使用 transform 而不是 left，这允许更平滑和连续的动画。
通过这些更改，文本应该会平滑且连续地旋转，不会在句子中出现任何中断。
英文:
The .box element has been widened to 1200px and given a perspective value of 1000px. The transform-origin property on the .box .inner elements has been adjusted to position the text closer to the front of the box and prevent it from disappearing behind the sides.
The animation property on the .box .inner span elements has been slowed down to 20 seconds, and the from and to values in the @keyframes rule have been changed to use transform instead of left, which allows for a smoother and more continuous motion.
With these changes, the text should rotate smoothly and continuously without any breaks in the sentence.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: navajowhite;
}
.box {
display: flex;
width: 1200px;
perspective: 1000px;
}
.box .inner {
width: 600px;
height: 300px;
line-height: 300px;
font-size: 6em;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.box .inner:first-child {
background-color: indianred;
color: darkred;
transform-origin: 100% 50%;
transform: perspective(1000px) rotateY(-30deg);
}
.box .inner:last-child {
background-color: lightcoral;
color: antiquewhite;
transform-origin: 0% 50%;
transform: perspective(1000px) rotateY(30deg);
}
.box .inner span {
position: absolute;
animation: marquee 15s linear infinite;
}
.box .inner:first-child span {
animation-delay: 0s;
left: 100%;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-150%);
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>texto en 3D</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="inner">
<span>welcome to my restaurant</span>
</div>
<div class="inner">
<span>welcome to my restaurant</span>
</div>
</div>
</body>
</html>
<!-- end snippet -->
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论