在CSS步骤中创建键入光标效果时面临动画问题()
，可以通过使用CSS动画和伪元素来解决。
首先，可以使用CSS动画来创建光标的闪烁效果。可以通过@keyframes规则定义一个动画，然后将其应用到光标元素上。例如：
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.cursor {
animation: blink 1s infinite;
}上述代码定义了一个名为"blink"的动画，使光标在0%、50%和100%的关键帧上分别具有不同的透明度。然后，将这个动画应用到光标元素上，使其无限循环播放。
接下来，可以使用伪元素来模拟键入的效果。可以通过设置伪元素的content属性为一个空字符串，并使用animation-delay属性来控制每个字符的出现时间。例如：
.cursor::after {
content: "";
display: inline-block;
width: 0;
height: 100%;
animation: typing 1s steps(10) infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}上述代码定义了一个名为"typing"的动画，使伪元素的宽度从0逐渐增加到100%。然后，将这个动画应用到伪元素上，使其以步进的方式模拟键入的效果。
综合上述两个部分，可以创建一个具有键入光标效果的CSS样式。例如：
.cursor {
position: relative;
display: inline-block;
font-size: 16px;
}
.cursor::after {
content: "";
display: inline-block;
width: 0;
height: 100%;
animation: typing 1s steps(10) infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
.cursor {
animation: blink 1s infinite;
}这样，就可以在CSS步骤中创建一个具有键入光标效果的动画。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云CSS：https://cloud.tencent.com/product/css
相关·内容
3回答
使闪烁的光标在CSS动画的末尾消失
css、css-animations
我有一个闪烁的光标动画设置两行文字。
我希望光标在文本出现时出现，并在第一行的末尾消失--但在第二行的末尾保持闪烁。
有人问了一个非常类似的问题，但解决方案使光标完全不可见：
测试了这个答案代码(在几个浏览器上)，它就是不能工作。
我现在拥有的是：
代码：
.typewriter1 p {
overflow: hidden;
border-right: .15em solid #00aeff;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0;
color: #fff;
padding-left: 1
浏览 0提问于2019-09-17得票数 3
1回答
键入超出指定宽度限制的动画CSS
html、css
如果运行附带的代码片段，您将看到"execute myProfile“输入动画扩展得太多；远远超出了我为标题指定的宽度。
@import url(https://fonts.googleapis.com/css?family=Saira);
body{
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
font-family: 'Saira', sans-serif;
display: flex;
flex-direction: column;
j
浏览 6提问于2019-03-26得票数 0
回答已采纳
3回答
如何延迟应该在特定时间后开始的css动画
animation
我在css动画中使用了steps()。现在我想在特定的时间后启动css动画。下面是一个例子。
@-webkit-keyframes typing {
from { width: 0 }
to { width:455px; }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color:
浏览 4提问于2014-10-18得票数 0
1回答
文本在CSS动画之后居中移动
html、css、css-animations
我在CSS动画中有一些行为不端的文本。
文本看起来会自动“输入”出来，然后以一个闪烁的光标结束。它做得很好，但当它键入一行后，该行往往会“浮动”或“移动”到页面的中心。
我使用text-align: center;和flexbox将文本居中(以使其位于页面的中心)。
下面是一些代码：
html, body {
height: 100%;
width: 100%;
}
body {
overflow-x: hidden;
overflow-y: hidden;
}
.do-you-even-flexbox, .content {
position:rela
浏览 6提问于2015-12-24得票数 3
3回答
css动画在div中的应用
html、css
我在css中创建了一个带有背景图像的div，我希望div/image具有自动淡入和淡出的效果。
为此，我收集了css动画，但是我不知道如何将动画的css与当前div的css结合起来。下面是我到目前为止所拥有的
<div id="image"></div>
CSS
div.image {
content:url(http://www.google.com/images/srpr/logo3w.png);
float:left;
}
动画CSS
@-webkit-keyframes blink {
0% {
opacity:
浏览 2提问于2014-08-17得票数 2
回答已采纳
4回答
Typed.js动画闪烁光标不工作
javascript、jquery、css、typed.js
所以我尝试在typed.js上使用闪烁的光标，这是一个很棒的js.plugin，可以在这里找到：
我试图让闪烁的光标在文本输入时与文本内联，但正如您在jsfiddle：中看到的那样，它只是在一侧闪烁。
这样做的原因是，我已经对键入的内容应用了一些id，以便文本居中并更改字体，等等。
不幸的是，这似乎破坏了闪烁的效果。
有没有人知道如何使用js小提琴上所示的CSS样式应用这两个闪光灯。
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0
浏览 173提问于2016-09-20得票数 0
3回答
为内部光标和跨度设置动画的匹配颜色
css、css-animations
我使用棱镜来显示标记，如果在上面我有动画闪烁的光标，问题是标记的颜色设置为与光标背景几乎相同的颜色：
下面是最小的例子：
@keyframes terminal-blink {
0%, 100% {
background-color: var(--background, #000);
color: var(--color, #aaa);
border-bottom: none;
border-left: none;
margin-left: 0;
}
50% {
background-color: var(
浏览 2提问于2018-08-27得票数 0
回答已采纳
1回答
如果在视口中可见，则设置图元动画
javascript、html、jquery、css
我已经在网页上的一些文本上添加了打字机效果，但是该部分位于页面的中间。而且只要有人访问该页面，动画就会立即开始，因此用户无法看到该动画。我只使用CSS的动画和使用Bootstrap的网页。我对JavaScript不是很熟悉，在实施互联网上提供的解决方案时遇到了问题。如果你调查一下并帮助我，我将不胜感激。
CSS
<style>.pcb-text {
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 600px) {
浏览 0提问于2020-08-27得票数 1
3回答
CSS分型效果
html、css
我试图在CSS中使用多行代码来实现输入效果。
这是我所遵循的一个很好的参考点：
现在我想要的效果是，一旦第一个闪烁光标的动画结束，第一个边框-右边的可见性就会被隐藏起来。在动画结束后，右边的边框仍然在屏幕上，我希望它不被看到。(好像按下了键盘上的enter按钮。)我该怎么做？
.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in
浏览 4提问于2016-11-07得票数 0
回答已采纳
2回答
使用CSS控制键入动画中的光标位置
html、css、animation、effect、typing
所以我已经实现了使用CSS动画来键入我的名字。这个想法是有一个打字效果，光标停留在句子的末尾，一旦它完成打字。
但是，在我的例子中，光标会上升到屏幕的末尾，并在那里等待，我不想这样做。
为了达到打字效果，我参考了这个。正如您在本教程中所看到的，光标在句子完成后停止，不会一直运行到屏幕的末尾。
我的CSS代码片段是相同的：
.titles {
position: absolute;
top: 15%;
left: 0;
right: 0;
}
h1 {
font-size: 4.5em;
color: white;
font-family: 'Droid S
浏览 6提问于2017-06-23得票数 0
回答已采纳
4回答
CSS动画打字
html、css、animation
我在做一个动画，就像我在打字。为了实现这一点，我使用CSS动画“步骤”。
动画本身运作得很好。然而，如果我想动画多行文字，他们都在同一时间开始播放。这并没有给我想要的效果。(尝试在单个<br>中使用<h1>__，它切断了文本，但再次启动动画。)
为了解决这个问题，我将下一行文本放在一个<h2>中，并为每一行文本设置一个动画延迟。这是可行的，但在动画开始之前文本是可见的。
我想要隐藏的文字，直到动画开始播放，真正得到‘实时打字’的效果。
有人知道我是怎么做到的吗？
HTML
<div class="content">
&l
浏览 3提问于2013-04-10得票数 2
回答已采纳
1回答
如何放慢打字机文本动画的速度？
html、css、visual-studio-code、bootstrap-4、css-animations
我正在做我的文件夹，并在第二行文字中添加了打字机效果，但我觉得速度太快了。我尝试过调整动画秒数、延迟等，但都不起作用。代码如下：
Html
<div class="banner">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 class="font-
浏览 0提问于2020-10-22得票数 0
1回答
CSS打字机效果创建重复之间的延迟
html、css、typewriter
我使用这段代码来创建打字机效果。有没有办法只使用css就能在每次重复之间增加延迟？动画-延迟仅延迟第一次重复。 .wrap {
display: flex;
align-items: center;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #00bcd4;
font-size: 26px;
overflow: hidden;
border-right: .15em solid #ddd;
white-space: nowrap;
/
浏览 25提问于2021-07-18得票数 1
回答已采纳
1回答
CSS动画-设置响应动画的持续时间
css、responsive-design、css-animations
我正在努力学习CSS动画，有一件事我不知道，也在网上找不到，那就是如何设置合适的时间。
我正在尝试让我的网站响应，因此字体大小将根据视图的大小而改变。到目前为止，我有以下代码：
@media screen {
.EntranceDiv{
top: 40%;
position: relative;
}
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld{
overflow: hidden; /* Ensures the content is not revealed until the animation
浏览 0提问于2018-04-18得票数 1
回答已采纳
2回答
如何在文本结束后停止光标
css、animation、typing
我的网页有一个打字效果，但它有一个小问题。文本键入完成后，闪烁的光标会一直移动到行尾。我怎么才能让它留在最后一个字母之后呢？
这是基本的，但也许我需要添加更多的东西或修改它？
.typewriter h1{
position: relative;
top: 7em;
width: fit-content;
overflow: hidden;
border-right: .15em solid white;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: typi
浏览 9提问于2018-07-24得票数 0
回答已采纳
3回答
循环CSS打字机效果和更改文本
javascript、jquery、html、css、effects
我需要遍历CSS打字机效果，并更改每个循环的文本。这是我用来实现打字机效果的代码。我猜我需要使用javascript，但我不确定该怎么做。你知道我该怎么做吗？
.typewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single
浏览 1提问于2017-03-16得票数 1
回答已采纳
4回答
使用html和css对齐文本
html、css
我想对齐文本，以便标题在页面上居中，这是我要做的。我想使打字机的效果开始于标题和居中。我把它弄得乱七八糟，但我想不出怎么把它写在课文下面。我能把它带到中间，但不是在中间。我也希望线的结构保持不变，如果这是合理的，而不是每条线的中心单独。
/* TITLE */
.title {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
/* TYPEWRITER EFFECT */
.c
浏览 7提问于2020-07-27得票数 0
回答已采纳
3回答
点击停止css动画闪烁图像
jquery、css、html
我有一个图像，我已经做了眨眼使用css。这张图片看起来像(某种类型的)光标。它位于文本区域之上。当用户单击图像或文本区域时，我希望闪烁的图像消失。到目前为止，这东西一直在闪烁。我怎么才能让它永远停下来？
HTML：
<form id="commentsForm">
<div id="textareaWrap">
<img src="img/caret.png" id="blinking_caret" title="blinking caret" />
<textarea i
浏览 0提问于2014-05-07得票数 0
回答已采纳
1回答
如何将光标移动到动画中的下一行？
html、css
我制作了一个动画，它写道：
"[Your Name] blah blah"
在打字效果中。现在我想让光标跳到下一行并写下：
"[Your Father Name] blah blah"
我曾尝试添加<br>，但它同时写入两行代码，我想一个接一个地添加。
.typewriter h1 {
color: black;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border
浏览 0提问于2019-06-05得票数 0
1回答
我需要多个循环的多行文字书写效果，即完成所有行后，在CSS中重新开始
javascript、html、jquery、css、animation
我使用了“动画-迭代-计数:无限”，但它需要在每一行单独使用。我需要将它应用于所有行的组合。我的代码对每一行都使用了单独的CSS类，这非常烦人。我需要一个单独的类来应用于整个文本，无论有多少行或段落。下面是我的代码。
.css-typing p {
font-family: "Courier";
font-size: 14px;
width: 200em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 2s steps(40, end);
animation: typ
浏览 0提问于2020-11-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
