我试图让幻灯片中的文本更靠近左边距，始终在灰色区域的水平和垂直中间。此外，正如您可能看到文本消失时，x滚动条增长，黑色空间显示在右侧。有谁知道我似乎无法解决这个问题，我非常感谢你的帮助。
同样在响应模式下，黑色区域显示在您的右侧，我不确定它是否与幻灯片显示或其他错误相关？
感谢并期待您的回答
这是在线网络http://vtwg.eu/ZMT/untitled3.html 你可以找到下面的代码 维多利亚
#gifphrases1 {
font-family: arial;
background: grey;
overflow: hidden;
height: 180px;
background-image: url("back.png");
text-align: center;
line-height: 30px;
margin-left: 0px;
}
.item-1,
.item-2,
.item-3 {
padding: 20px;
position: absolute;
display: block;
width: 90%;
font-size: 1.6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
}
.item-1{
animation-name: anim-1;
}
.item-2{
animation-name: anim-2;
}
.item-3{
animation-name: anim-3;
}
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}<center>
<div id="gifphrases1">
<p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br> <b>Marc Hogan - Pitchfork</b> </p>
<p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>
</p>
<p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br> <b>Jeffrey Paradise - Poolside</b> </p>
</div>
</center>
答案 0 :(得分：0)
我认为你可以更新你的@keyframes。 为每个@keyframes定义“左”值为“-100％”，“0％”和“100％”。
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 0%; opacity: 1; }
33.33%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 0%; opacity: 1; }
66.66%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 0%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}
编辑＃1 ：
可以在每个“.item-＃”中添加margin-top: 0;以清空每个空间上方的空格。
编辑＃2 ：
我发现将position: relative添加到“＃gifphrases1”修复了overflow: hidden规则的故障。
但是，您必须注意#gifphrases1元素的高度。我使用下面示例中的height: 400px将其设置为400px（请参阅代码段）。
编辑＃3 ：
现在我考虑一下，将position: relative添加到“＃gifphrases1”可以让你做出你想要的垂直居中！
将top: 50%规则添加到项目中 - 将它们放在父元素的中间位置下方。
现在，添加transform: translate(0, -50%)将改变它，并将每个项目的中间位于父元素的中间。 完全集中！←重要的是什么
#gifphrases1 {
font-family: arial;
background: grey;
position: relative;
overflow: hidden;
height: 400px;
background-image: url("back.png");
text-align: center;
line-height: 30px;
margin-left: 0px;
}
.item-1,
.item-2,
.item-3 {
margin-top: 0;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: block;
width: 90%;
font-size: 1.6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 0%; opacity: 1; }
33.33%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 0%; opacity: 1; }
66.66%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 0%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}<center>
<div id="gifphrases1">
<p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br> <b>Marc Hogan - Pitchfork</b> </p>
<p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>
<p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br> <b>Jeffrey Paradise - Poolside</b> </p>
</div>
</center>
答案 1 :(得分：0)
我注意到的第一件事是您在</p>
<p class="item-2"></p>标记
接下来，这是您的所有HTML工作：
<center>
<div id="gifphrases1">
<p class="item-1">
If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge.
<br>
<b>Marc Hogan - Pitchfork</b>
</p>
<p class="item-2">
With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back.
<br>
<b>Aerosyn-Lex Mestrovic - Visual Artist</b>
</p>
<p class="item-3">
From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!
<br>
<b>Jeffrey Paradise - Poolside</b>
</p>
</div>
</center>
你的CSS
#gifphrases1 {
font-family: arial;
background: grey;
overflow: hidden;
height: 180px;
background-image: url("back.png");
text-align: center;
line-height: 30px;
margin-left: 0px;
}
.item-1,
.item-2,
.item-3 {
padding: 20px;
position: absolute;
display: block;
width: 90%;
font-size: 1.6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
}
.item-1{
animation-name: anim-1;
}
.item-2{
animation-name: anim-2;
}
.item-3{
animation-name: anim-3;
}
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 0%; opacity: 1; }
33.33%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 0%; opacity: 1; }
66.66%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 0%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}