CSS 文字幻灯片

Question

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

@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; }
}

<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>

但是对于我的项目，我需要 4 个文本框。我试图调整脚本，但出现错误，我不明白为什么。如果我添加另一个文本框，调整文本框的 class，编辑 css 并调整文本框的时间，幻灯片效果会很好，直到最后一张（新添加的）幻灯片出现。然后第一行出现，即使最后一张幻灯片还没有完成。谁能帮我找出我做错了什么？

@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; }
}

<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 1

您的代码稍作改动。您错过了 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; }

    }

@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

问题在于定义动画步骤，如果您查看 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; }
}

行首的百分比表示：

Go from FIRST VALUE to SECOND VALUE and end there (follow by next line).

如果您查看 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>

CSS 文字幻灯片

CSS Text Slideshow

html

css

slider

keyframe

css-animations