Question

HTML：

<!DOCTYPE html> 

<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
        <div class= "typewriter">
        <h1>Hello World</h1>
        </div>
</body>

</html>

CSS

body{
    background: black;
}

h1{
    text-align: center;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .1em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .5em; /* Adjust as needed */
  animation: 
    typing 5s steps(60),
    blink-caret .8s step-end 3s;

}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 80% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

如何在结束'输入'文本后禁用闪烁的光标？如果不可能，那么如何在一段时间后禁用闪烁的光标？

如果不清楚，请发表评论。

感谢您的时间

Answer 1

首先将border-right的{{1}}更改为h1
然后将blink-caret的时间动画更改为transparent或更短（如果需要）

＆＃13;

5s

＆＃13;

body {
  background: black;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .1em solid transparent;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .5em;
  /* Adjust as needed */
  animation: typing 5s steps(60), blink-caret 5s;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 80%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}

＆＃13;

如何在文本结束后隐藏闪烁的光标

1 个答案: