开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使光标在完成第二行时闪烁-使用CSS实现打字效果

要实现光标在完成第二行时闪烁并模拟打字效果，可以使用CSS动画和HTML结构来完成。以下是一个详细的示例，展示了如何实现这一效果。

HTML结构

首先，创建一个包含文本和光标的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="typewriter">
        <span class="text">Hello, World!</span>
        <span class="cursor">|</span>
    </div>
</body>
</html>

CSS样式

接下来，使用CSS来实现打字效果和光标闪烁。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-family: Arial, sans-serif;
}

.typewriter {
    display: inline-flex;
    align-items: center;
}

.text {
    font-size: 2em;
    white-space: nowrap;
}

.cursor {
    font-size: 2em;
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: black; }
}

解释

HTML结构:
- typewriter 类用于包裹文本和光标。
- text 类用于显示实际的文本内容。
- cursor 类用于显示光标，并通过CSS动画使其闪烁。

CSS样式:
- body 样式设置了页面居中对齐，并去除了默认的margin。
- typewriter 类使用 inline-flex 来水平排列文本和光标。
- text 类设置了字体大小，并确保文本不会换行。
- cursor 类设置了字体大小，并应用了 blink 动画，使光标在0.7秒内闪烁。
动画:
- @keyframes blink 定义了光标的闪烁效果。从透明到黑色再到透明，每0.7秒循环一次。

应用场景

这种打字效果常用于网站首页、博客文章开头或其他需要吸引用户注意力的地方。它可以增加页面的交互性和视觉吸引力。

可能遇到的问题及解决方法

光标闪烁不明显:
- 确保 @keyframes blink 中的颜色变化明显，可以尝试调整透明度和颜色的对比度。
- 调整动画的持续时间（例如，缩短到0.5秒）以使闪烁更频繁。

文本换行问题:
- 使用 white-space: nowrap; 确保文本不会自动换行。
兼容性问题:
- 确保在不同浏览器中测试效果，必要时添加浏览器前缀。

通过以上步骤，你可以实现一个简单的打字效果，并使光标在完成第二行时闪烁。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

用纯 CSS 实现文本打字机效果，一定很酷！

在本文中，你将学习如何使用纯CSS实现打字机效果，使网站的文本更加动态和迷人。打字机的效果是文字逐渐显露出来，就好像是在你眼前打字一样。...首先我们来解释一下打字机效果的实现方式: 打字机动画将通过使用CSS steps()函数一步一步地将文本元素的宽度从0更改为100%，从而显示文本元素。一个闪烁动画将使光标动起来。...制作和样式闪烁光标动画很明显，最初的打字机没有闪烁光标，但增加一个来模仿现代电脑/文字处理器闪烁光标的效果已经成为一种传统。闪烁的光标动画有助于使打印出来的文本从静态文本元素中脱颖而出。...我们将在typed-out类的规则中包含这个动画，并将其动画方向属性设置为infinite，使光标每隔0.8秒消失一次，然后再次出现: } 调整闪烁打字效果的代码我们可以通过调整光标的右边框使光标变薄或变厚...总结在本文中，我们已经看到使用CSS创建动画“打字机”文本是多么容易。这种打字效果绝对可以为你的网页增添乐趣。不过，或许以温和的警告作为结束是值得的。

3.4K1 0

打字机效果的实现与应用

前言在 web 应用中，模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果，往往能够吸引人们的眼球，让用户的注意力聚焦在输入的内容上，其实使用的是 web 动画模拟打字机效果，本文将和大家探讨打字机效果的实现方式以及应用...js 实现 setInterval 实现 /* 产生光标闪烁的效果 */ #content::after { content: '|'; color: #000;...，只需把要展示的文本进行切割，使用定时器不断向 DOM 元素里追加文字即可，同时使用::after 伪元素在 DOM 元素后面产生光标闪烁的效果。...代码和效果图如下： setTimeout 实现和 setInterval 一样，setTimeout 也可以实现 /* 产生光标闪烁的效果 */ #content::after...打字机效果应用程序讲究的输入和输出，虽然我们在页面上实现了动态输入的效果，若能够同步实现输出，岂不是实现了编译器的效果？

2.7K2 0

【动画进阶】类 ChatGpt 多行文本打字效果

今天我们来学习一个有意思的多行文本输入打字效果，像是这样：这个效果其实本身并非特别困难，实现的方式也很多，在本文中，我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。...也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果：单行文本打字效果在此之前，我们快速看一个之前在【Web动画】科技感十足的暗黑字符雨动画分享过的...利用这个特性，配合 animation 的 steps，我们可以轻松的利用 CSS 实现打字动画效果： Pure CSS Typing animation....巧用 background 实现多行光标效果好，那接下来，我们尝试换一种思路实现一个适配单行和多行的文本打字效果。...得到了最初的完整效果：整个 DEMO 的完整代码，你可以戳这里了解：CodePen Demo -- 多行打字效果整个方案的核心，在于理解如何利用内联元素的 background，巧妙的实现动态光标效果

2571 0

Vue3实现打字机效果

typeit 介绍 typeit是一款轻量级打字机特效插件。该打印机特效可以设置打字速度，是否显示光标，是否换行和延迟时间等属性，它可以打印单行文本和多行文本，并具有可缩放、响应式等特点。...HTML也可以 speed: 100, lifeLike: true,// 使打字速度不规则 cursor: true,//在字符串末尾显示闪烁的光标...breakLines: false,// 控制是将多个字符串打印在彼此之上，还是删除这些字符串并相互替换 loop: true,//是否循环 }).go() }) </script...封装为组件 /** * 打字机效果...HTML也可以 speed: 150, lifeLike: true,// 使打字速度不规则 cursor: true,//在字符串末尾显示闪烁的光标

1.8K1 0

SSE打扮你的AI应用，让它美美哒

之前在写一个类ChatGPT应用，前后端数据交互有哪几种文章中，我们就对其有过简单的介绍。今天我们就来聊聊，如何实现基于SSE的前后端项目。...最终，我们就会得到一个和本文开头的那个效果。求豆麻袋，好像有一个东西没给大家展示，那就是实现打字效果。别着急，我们这就说。 4....display: inline-block; width: 1ch; animation: flicker 0.5s infinite; } } 这段代码主要用于创建打字机效果中的光标闪烁效果...： @keyframes flicker 动画定义了光标的闪烁效果，通过改变透明度来实现闪烁。....cursor 类应用了闪烁动画，并设置了宽度，使其显示为一个闪烁的光标。最终效果是在 .text-writer-wrapper 中显示的光标会每 0.5 秒闪烁一次，模拟文本编辑器中的光标效果。

1491 0

7个实用的CSS技巧

文字的打字效果网页设计正在以每分钟的速度变得更富创意。借助CSS动画功能，您可以让您的网页充满生机。在这个例子中，我们使用动画和 @keyframes 属性来实现打字机效果。...其次，我们使用 @keyframes 来声明动画何时开始。例如，如果你在“文字打字效果”后面写了另一个词，除非你改变CSS片段中的 steps() 数量，否则动画将无法工作。...也就是说，这种效果并不是特别新颖。然而，尽管可以通过使用CSS达到同样的效果，但大多数开发者仍然会选择使用JavaScript库。...一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的 div元素上，所以它不会干扰到元素之外的其他元素。...并使用 transform 属性在 :checked 规范返回真值时更改状态。使用这种方法可以实现各种各样的目标。例如，当用户点击特定的复选框时，切换隐藏的内容。

1773 0

Typed.js

Github https://github.com/mattboldt/typed.js 快速使用 var typed = new Typed('#element', { strings: ['第一句话', '第二句话...) 使用淡出效果的css类 fadeOutDelay 数字(毫秒) 开始淡出前的延迟 showCursor 布尔是否显示光标 cursorChar 字符串光标字符 autoInsertCss 布尔...在HTML中插入光标和淡出CSS attr 字符串 attr属性用于键入 bindInputFocusEvents 布尔绑定到焦点，如果el是文本输入则模糊 contentType 字符串使用'html...``包裹命令模拟终端打字效果

4112 0

前端实现打字机的效果 -- typed库的使用

/typed.js/ 其实可以使用原生JS来实现这个效果，但是还是很麻烦的 typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果这是一款轻量级，使用简单，功能强大的插件...主要特点: 易于使用：通过简单的配置，就可以在网页上实现打字效果。...高度可配置：可以自定义打字速度、打字时间间隔、回退速度等。多种模式：支持打字、删除、打字后再删除等不同的动画模式。无依赖：Typed.js 不依赖于任何第三方库，可以直接在网页上使用。...* @property {string} cursorChar 光标的字符 * @property {boolean} autoInsertCss 是否将光标和fadeOut的CSS插入...,//以毫秒为单位淡出延迟 smartBackspace: true, //智能后间距, }); 实现效果就和文章一开始展现的码上掘金那个效果一样. 5.

3651 0

纯css实现模拟打字效果

模拟打字效果前沿看到上面的打字效果，相信大家第一时间想到的就是使用typed.js，其强大的功能，相信大家在使用的时候肯定得到了不少好处。...对于这个不做过多的介绍，有兴趣的可以参考 typed.js实例效果实现对于上面的模拟打字效果来说，只用css如何实现？...分为两部，第一个是实现文字的动画部分 // Html // 新增一个对应的容器以及容器内需要打字效果的内容闪烁的右侧竖线我们可以使用border-right进行对应的模拟就好。...在原来基础上再添加一个border动画，最终css代码为 .wrapper { height: 100vh; /*This part is important for centering*/

1.3K3 0

Css3新特性应用之过渡与动画

一、缓动效果学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点 Css中只支持一条贝塞尔曲的运动...1s infinite steps(4); } 三、闪烁效果...实现两种闪烁效果，一是平滑闪烁，另一种是帧闪烁（更接近于现实）平滑闪烁主要是利用animation-iteration-count和animation-direction两个属性实现。 ...animation-timing-function: steps(1); } 我是逐帧的显示和隐藏三次四、打字效果...width: 0; } } @keyframes cart{ 50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现

1.1K7 0

HTML+CSS+JS实现简单的打字机

HTML+CSS+JS实现简单的打字机 js /** * 动态打字效果函数 * (select和element只能选择一个) * @param {Object} options - 配置选项 *...select); } // 当前要显示的字符串的第几个字符 let index = 0; // 文本数组的下标 let xiaBiao = 0; // 判断是要实现打字还是删除字效果...，初始为真（打字） let huan = true; // 记录已经完成一轮的次数 let completedRounds = 0; /** * 获取一个随机速度值...position: relative; } /* 小光标 */ .typeit_text_css::after{ content: ''; position: absolute.../typeit_cy/typeit_cy.js"> /** * 动态打字效果函数 * (select和element只能选择一个) * @param {Object} options

991 0

【Linux】学习Linux，需要借助具象化的思维

下面我们一起来认识一下这两个新朋友；一、命令行与图形化界面命令行顾名思义就是输入命令的地方，这里的命令指的就是我们在Linux需要学习并使用的对应的指令，如下所示：当我们打开Centos 7后我们会在终端界面中看到一个黑色闪烁的光标...我们现在使用的键盘原型肖尔斯和格利登型打字机却是在1868年诞生。...很早就在考虑如何使电脑的操作更加简便，用什么手段来取代由键盘输入的繁琐指令。...它的工作原理是由滚轮带动轴旋转，并使变阻器改变阻值，阻值的变化就产生了位移讯号，经电脑处理后屏幕上指示位置的光标就可以移动了。...当第二个参数类型是文件时，mv命令完成文件重命名，此时，源文件只能有一个（也可以是源目录名），它将所给的源文件或目录重命名为给定的目标文件名。3.

761 0

拥有全球最大指令集的意念打字系统，创下世界纪录

基于SSVEP的"意念打字" 稳态视觉诱发电位(steady-state visual evoked potentials,SSVEP)是BCI系统经常使用的一种信号,它当人眼受到固定频率超过4Hz的视觉刺激时...以LED作为光源诱发视觉刺激为例，利用LED可以实现不同颜色光的闪烁刺激来诱发SSVEP，而不同颜色光的LED闪烁会影响SSVEP的响应。 ?...该频段的刺激频率存在一定的缺点: 以此频段频率闪烁的视觉刺激源更容易使受试者产生视觉疲劳；当视觉刺激源的刺激频率在此频段时，易使受试者诱发出癫痫；人的自发脑电波的alpha波段和beta波段的频率分别为...每个字符随机的闪烁，与经典的刺激范式不同，不是按照行列闪烁，即当某个字符闪烁结束一段时间后，下一个字符才开始闪烁。完成一个字符输入，需要36次字符的闪烁。...在第二层，被检测组的特征被分布到另外七个区域。例如，下图显示了在第二层中展开的一个区域。在第二层，与第一层所做的工作类似，不同的区域被强化，而受试者集中在其中一个区域。

1.2K4 0

【Linux】学习Linux，需要借助具象化的思维

下面我们一起来认识一下这两个新朋友；一、命令行与图形化界面命令行顾名思义就是输入命令的地方，这里的命令指的就是我们在Linux需要学习并使用的对应的指令，如下所示：当我们打开Centos 7后我们会在终端界面中看到一个黑色闪烁的光标...我们现在使用的键盘原型肖尔斯和格利登型打字机却是在1868年诞生。...Engelbart很早就在考虑如何使电脑的操作更加简便，用什么手段来取代由键盘输入的繁琐指令。...它的工作原理是由滚轮带动轴旋转，并使变阻器改变阻值，阻值的变化就产生了位移讯号，经电脑处理后屏幕上指示位置的光标就可以移动了。...当第二个参数类型是文件时，mv命令完成文件重命名，此时，源文件只能有一个（也可以是源目录名），它将所给的源文件或目录重命名为给定的目标文件名。 3.

781 0

纯CSS实现的文字效果还可以这么酷炫!

本文中大师兄为你精选了10个使用纯CSS实现的文字炫酷效果，欣赏完之后一定要自己实现体验一番哦~ 一.渐变文字效果该效果主要利用background-clip:text配合color实现渐变文字效果...0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } } 四.打字机效果...该效果主要是通过改变容器的宽度实现的。...通过上述的这几个属性就可以实现一个简易的打字机效果了~ 五.故障风格文字效果该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。...其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果

1.8K1 1

纯CSS实现的文字效果竟然可以这么酷炫！

本文中大师兄为你精选了10个使用纯CSS实现的文字炫酷效果，欣赏完之后一定要自己实现体验一番哦~ 一.渐变文字效果该效果主要利用background-clip:text配合color实现渐变文字效果...0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } } 四.打字机效果...该效果主要是通过改变容器的宽度实现的。...通过上述的这几个属性就可以实现一个简易的打字机效果了~ 五.故障风格文字效果该动画效果比较复杂，主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。...其中clip-path属性是CSS3的新属性蒙版，其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果

1.9K2 1

树莓派基础实验29：I2C LCD1602实验

I2C LCD1602上的蓝色电位器用于调整背光，以获得更好的显示效果。I2C使用两个双向极漏开路线，串行数据线（SDA）和串行时钟线（SCL），通过电阻上拉。...正是因为这样，我们在程序中可以利用下面的“光标或显示移动指令”使字符慢慢移动到可见的显示范围内，看到字符的移动效果。那么如何在液晶上显示字符呢，就是把要写入的字符给DDRAM。...C=1：光标显示，C=0：光标不显示。 B=1：光标闪烁，B=0：光标不闪烁。说明：这里的设置是显示开，不显示光标，光标不闪烁，设置字为0x0c。指令5：光标或显示移位 ?...光标或显示移动指令 ? 光标或显示移动指令说明说明：在需要进行整屏移动时，这个指令非常有用，可以实现屏幕的滚动显示效果。初始化时不使用这个指令。指令6：功能设置命令 ?...的第二行显示 tmp = tmp[1:] #每次循环去掉字符串首位字符，实现字幕向左移动的效果 time.sleep(0.8)

1.9K4 0

我潜入清华神秘实验室，用脑机接口写了两句诗

脑控机器人打字科学地讲，我的“超能力”是机器赋予的。这套设备，就藏在清华的脑机接口实验室里。在机器的帮助下，我的脑电波被采集出来，实现了“脑控输入法”，也就是上面提到的动用意念打字。...第二次，我尝试通过轻轻摆动头部的方向、将需要“打出”的字符放在视线最中央来集中注意力。果然，效果好了很多，连着对了四五个字符，最终准确率过半。...△ 我努力发射脑电波的时候，另一台电脑施展了“读心术” 初步掌握了意念打字之后，就可以进阶写诗了。那两句是杜甫的《望岳》：“岱宗夫如何，齐鲁青未了。”...对于系统的设计者来说，要设计一批合适的“刺激物”；对于使用者来说，全神贯注的“注视”是必需的。这种“注视”着一片闪烁屏幕的方法，也是目前各种脑机接口方法中输入效率最高的。...初赛需要完成8组随机字符的输入，之后进行古诗输入，按照完成率来计算分数。

4579 0

10 个不错的 CSS 小技巧

在 CSS 动画的协调下，你的网页会像活的一样。在这个例子中，我们将使用 animation 和 @keyframes 属性去实现打字效果。...接着，第二步，我们使用 @keyframes 去声明什么时候开始执行动画。...因此阴影是基于图片的内部形状，而不是显示在图片外面。代码片段 3. 自定义 Cursor 你不需要强迫你站点访问者使用独特的光标。至少，不是出于用户体验的目的。...下面是纯 CSS 代码片段对其的实践。代码片段 8. 侧边栏的 Hover 效果有没有可以使用 CSS 就可以实现一个动态 Hover 效果的侧边栏呢？...使用 first-letter 实现首字母大写在 CSS 中，可以选择确定的 first-of-type 元素。在这个例子中，我们使用 ::first-letter 伪类去实现首字母大写的效果。

1K1 0

Typora——一款简洁的Markdown编辑器

界面上也有插入代码这一按钮咯在界面的左下角这个标志与其他Markdown编辑器是一样的.(应该不是很难认出) 3.数学公式刚刚使用Markdown时并不知道如何插入数学公式....QAQ 这里给一下示例 qwq 是不是感觉超级大气的说 ~ 4.主题这个时候,不出所料的话,你应该发现了这个东西.主题完了被发现了qwq 其实这个东西在系统原生窗口样式下就被摆在了倒数第二个位置的...PS:不要修改内置的几个CSS文件,因为Typora每次在升级的时候都会覆盖缺省的CSS,导致修改失败. 5.文本导出文章用Typora写出之后,我们需要导出文章....这个才是最骚好玩的好不好 qwq 你看当我们在设置中打开了文字高亮. 效果就是这样 //话说为啥是黄色 emmm 7.专注模式 and 打字机模式....打字机模式(Typewriter Mode ) 这是一个很良心的模式啦,能有效保护颈椎.(保健打开这个功能的话,你的光标会始终处于屏幕中间,我们的眼光就能正对屏幕中央.

1.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭