代码之家 › 专栏 › 技术社区 › Thomas Stahl

CSS文本幻灯片

keyframe css-animations slider css html

Thomas Stahl · 技术社区 · 6 年前

我找到了一个我想用于我的网站的片段。该代码段是一个带有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个文本框。我试图修改剧本,但我有一个错误,我不明白为什么。如果我添加另一个文本框,调整文本框的类别,编辑css并调整文本框的计时,幻灯片效果会一直很好,直到出现最后一张(新添加的)幻灯片。然后显示第一行,即使最后一张幻灯片尚未完成。anyobody能帮我找出我做错了什么吗?

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

您好

2 回复 | 直到 6 年前

Tatranskymedved 6 年前

这里的问题是定义动画步骤,如果你看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; }
}

行开头的百分比表示:

从开始 第一个值 到 第二个值 然后在那里结束(接着是下一行)。

如果你看 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>

Tan Duong 6 年前

代码中的小更改。你错过了第二个参数 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>