时间戳

首页 > 解决方案 > 使闪烁的光标在 CSS 动画结束时消失

css - 使闪烁的光标在 CSS 动画结束时消失

问题描述

我用两行文本设置了一个闪烁的光标动画。

我想让光标在文本出现时出现，并在第一行的末尾消失——但在第二行的末尾让它闪烁。

有人问了一个非常相似的问题，但解决方案使光标完全不可见：

在css动画结束时停止闪烁的光标

测试了这个答案代码（在几个浏览器上），它只是不起作用。

这是我所拥有的：

代码：

.typewriter1 p {
  overflow: hidden;
  border-right: .15em solid #00aeff;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0;
  color: #fff;
  padding-left: 10px;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

.typewriter2 p {
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #00aeff;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0;
  color: #fff;
  padding-left: 10px;
  opacity: 0;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite, slidein 1s ease 3.5s forwards;
  animation-delay: 3.5s;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes slidein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: #00aeff
  }
  50% {
    border-color: transparent;
  }
}
<div class="typewriter1">
  <p>A well defined plan will identify problems,</p>
</div>
<div class="typewriter2">
  <p> address challenges, and help restore confidence.</p>
</div>

标签： csscss-animations

解决方案

目前仅对示例 2 进行了充分解释。示例 3 与问题的 HTML 和 CSS 完全相同，只是略有改动。

示例 1 - 重新设计背景图像和渐变

HTML

首先，我们可以清理 HTML。这是一个单独的段落，所以让我们将它包装在一个段落元素中：

<p class="typewriter">
  A well defined plan will identify problems,
  address challenges, and help restore confidence.
</p>

其次，我们需要单独显示每一行，所以我们将每一行包裹在一个嵌套的 span 元素中，并用换行符手动换行：

<p class="typewriter">
  <span class="slide">
    <span class="inner-slide">A well defined plan will identify problems, 
  </span>
  </span><br>
  <span class="slide">
    <span class="inner-slide">address challenges, and help restore confidence.      </span>
  </span>
</p>

完整示例 1

当前限制：我们必须为left.

.typewriter {
  position: relative;
  height: 500px;
  margin: 0 auto;
  width: 310px;
  overflow: hidden;
}

.typewriter .slide,
.inner-slide {
  display: inline-block;
  overflow: hidden;
  height: 1.1em;
}

.typewriter .slide {
  position: relative;
  animation: typing 2s steps(30, end) forwards, blink-caret .75s step-end infinite;
  left: -310px;
  border-right: .15em solid transparent;
}

.typewriter .slide:nth-of-type(1) {
  animation: typing 2s steps(30, end) forwards, blink-caret .75s step-end 2.6;
}

.inner-slide {
  position: relative;
  animation: typing2 2s steps(30, end) forwards;
  white-space: nowrap;
  left: 310px;
}

.typewriter .slide:nth-of-type(2),
.typewriter .slide:nth-of-type(2) .inner-slide {
  animation-delay: 2s;
}

@keyframes typing {
  from {
    left: -310px;
  }
  to {
    left: 0;
  }
}

@keyframes typing2 {
  from {
    left: 310px;
  }
  to {
    left: 0;
  }
}


/*The typewriter cursor effect */

@keyframes blink-caret {
  0,
  100% {
    border-color: transparent
  }
  50% {
    border-color: #00aeff
  }
}

body {
  background: linear-gradient(to bottom right, #CCC 0, #F00 100%) no-repeat;
}
<p class="typewriter">
  <span class="slide">
        <span class="inner-slide">A well defined plan will identify problems, 
      </span>
  </span><br>
  <span class="slide">
        <span class="inner-slide">address challenges, and help restore confidence.</span>
  </span>
</p>

示例 2 — 原件。适用于纯色背景

的HTML

首先，我们可以清理 HTML。这是一个单独的段落，所以让我们将它包装在一个段落元素中：

<p class="typewriter">
  A well defined plan will identify problems,
  address challenges, and help restore confidence.
</p>

其次，我们需要单独显示每一行，所以我们将每一行包装在一个 span 元素中，并用换行符手动换行：

<p class="typewriter">
  <span>A well defined plan will identify problems,</span><br>
  <span> address challenges, and help restore confidence.</span>
</p>

CSS

现在我们需要一个元素来覆盖我们的文本并充当动画光标。我们可以使用一个以 100% 宽度开始并具有左边框的伪元素，如下所示：

.typewriter > span::before {
  content: '';
  border-left: .15em solid #00aeff; 
  position: absolute; 
  background: white; 
  height: 1.1em; 
  right: -5px; 
  width: 100%; 
}
  • 高度足以覆盖所有文本，包括基线以下。
  • 正确的负值会将其拉到其父级之外，因此光标不会显示在第一行，这要归功于overflow-hidden父级。
  • 它从 100% 宽度开始，动画为 0。
  • 它相对于具有相对位置的跨度绝对定位。

为了将光标保持在最后一行，我们需要给它一个 0 正确的值：

.typewriter > span:last-of-type::before {
  right: 0;
}

现在它将不再被拉到父级之外。

第二行需要延迟与动画运行时间相同的时间：

.typewriter > span:nth-of-type(2)::before {
  animation-delay: 2s;
}

因为我们希望段落宽度由文本的宽度和接受宽度的 span 决定，所以我们需要将它们设置为 inline-block：

.typewriter,
.typewriter > span {
  display: inline-block;
}

最后，我们将打字动画从 100% 反转为 0：

@keyframes typing {
  from {
    width: 100%
  }
  to {
    width: 0
  }
}

完整示例 2

.typewriter,
.typewriter > span {
  display: inline-block;
}

.typewriter > span {
  position: relative;
  overflow: hidden;
  padding-right: 4px;
}

.typewriter > span::before {
  content: '';
  position: absolute;
  border-left: .15em solid #00aeff;
  background: white;
  height: 1.1em;
  right: -5px;
  width: 100%;
  animation: blink-caret .75s step-end infinite, typing 2s steps(30, end) forwards;
}

.typewriter > span:nth-of-type(2)::before {
  animation-delay: 2s;
}

.typewriter > span:last-of-type::before {
  right: 0;
}



/* The typing effect*/

@keyframes typing {
  from {
    width: 100%
  }
  to {
    width: 0
  }
}


/*The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: #00aeff
  }
  50% {
    border-color: transparent
  }
}
<p class="typewriter">
  <span>A well defined plan will identify problems,</span><br>
  <span> address challenges, and help restore confidence.</span>
</p>

示例 3 - 完全使用问题中的示例

根据第一行插入符号更改迭代计数。在此示例中，该值为 4.1。此动画将迭代 4.1 次然后停止：

animation: blink-caret .75s step-end 4.1

创建插入符号的边框更改为透明：

border-right: .15em solid transparent

并且动画被翻转：

@keyframes blink-caret {
  0,
  100% {
    border-color: transparent
  }
  50% {
    border-color: #00aeff
  }
}

现在停止状态是透明的，第一行将在第一行消失。

完整示例 3

body {
width: 330px;
}

.typewriter1 p {
  overflow: hidden;
  border-right: .15em solid transparent;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0;
  padding-left: 10px;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end 4.1;
}

.typewriter2 p {
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid transparent;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0;

  padding-left: 10px;
  opacity: 0;
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite, slidein 1s ease 3.5s forwards;
  animation-delay: 3.5s;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes slidein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  0,
  100% {
    border-color: transparent
  }
  50% {
    border-color: #00aeff
  }
}
<div class="typewriter1">
  <p>A well defined plan will identify problems,</p>
</div>
<div class="typewriter2">
  <p> address challenges, and help restore confidence.</p>
</div>

推荐阅读