Question

我找到了一个我想用于我的网站的片段。该片段是一个带有3个盒子的文本滑块。你可以在这里看到它：

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.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; }
}

＆＃13;

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

＆＃13;

但对于我的项目，我需要4个文本框。我试图调整脚本，但我有错误，我不明白为什么。如果我添加另一个文本框，调整文本框的类，编辑css并调整文本框的时间，幻灯片效果正常，直到最后一个（新添加的）幻灯片出现。然后第一行显示，即使最后一张幻灯片没有完成。任何人都可以帮助我找出我做错了什么吗？

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

＆＃13;

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

＆＃13;

问候

Answer 1

问题是定义动画步骤，如果你看CSS，有一个keyframe定义了百分比，如何分割动画。像：

@keyframes anim {
    0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

行开头的百分比是：

从 FIRST VALUE 转到 SECOND VALUE 并在那里结束（接下来的行）。

如果您查看keyframe 3，您还没有以百分比定义最新值，因此如果您添加它，它将运行良好。完整代码如下。

自：

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

要：

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

Answer 2

代码中的小变化。您错过了anim-3 keyframes中的第二个参数，以便从屏幕中删除此文字

@keyframes anim-3 {
        0%, 50% { left: -100%; opacity: 0; }
      56.5%, 68.5% { left: 25%; opacity: 1; }
      75%, 100% { left: 110%; opacity: 0; }

    }

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3,
.item-4 {
	position: absolute;
  display: block;
	top: 2em;
  
  width: 60%;
  
  font-size: 2em;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

.item-4{
	animation-name: anim-4;
}

@keyframes anim-1 {
	0%, 6.5% { left: -100%; opacity: 0; }
  6.5%,18.5% { left: 25%; opacity: 1; }
  25%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
  
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

＆＃13;

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

＆＃13;

CSS文字幻灯片

2 个答案: