AReTrnA 2021-08-01 21:07 采纳率: 62.5%
浏览 57
已结题

我想要弄一个顺畅打字的动画

我想要在HTML或者CSS或者JS弄一个顺畅打字的动画。像是Office里的一样，
打字的时候光标后移

  • 写回答

4条回答 默认 最新

  • CSDN专家-Time 2021-08-01 21:19
    关注
    <!DOCTYPE html>
<html>
<head>
    <title>打字动画</title>
    <meta charset="utf-8">
    <style type="text/css">
        .a{
            width: 18em;
            white-space: nowrap;
            overflow: hidden;
            border-right: 0.1em solid;
            animation: aa 10s linear infinite,gb 10s linear infinite; 
             
        }
        @keyframes aa{
            0%{width: 0;}
            
        }
        @keyframes gb{
            50%{border-color: transparent;}
            100%{border-color: black;}
        }
        .b{
            width: 18em;
            white-space: nowrap;
            overflow: hidden;
            border-right: 0.1em solid;
            animation: bb 10s steps(18) infinite,cc 10s steps(2) infinite; 
             
        }
        @keyframes bb{
            0%{width: 0;}
            
        }
        @keyframes cc{
            50%{border-color: transparent;}
            100%{border-color: black;}
        }
    </style>
</head>
<body>
    <div class="a">平滑效果平滑效果平滑效果平滑效果</div>
    <br />
    <div class="b">跳动效果跳动效果跳动效果跳动效果</div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

  • 大模型前端，如何实现打字一样输出对话内容
    2025-03-20 00:30
    怪我冷i的博客 由于流式响应可能分成多个块，每个块可能包含多个data:开头的行，或者部分JSON，所以需要处理这些情况，比如按换行分割，过滤空行和done事件，然后解析每个JSON对象，提取content中的delta，并追加到聊天区域。...
  • html5飞机打字小游戏源码
    2023-07-25 15:06
    总的来说，HTML5飞机打字小游戏源码是一个结合了编程教育和娱乐的实例，不仅提供了有趣的打字练习，也为开发者提供了深入学习Web前端技术和游戏开发的实践机会。通过这个源码，我们可以学习到如何使用HTML5和...
  • 打字效果的带链接的新闻标题
    2020-06-12 07:11
    例如，你可以创建一个空的`<span>`元素，然后用JavaScript循环地向这个元素内添加字符，直到整个标题显示完成。 其次，CSS3提供了一些动画属性，如`@keyframes`，可以用来创建复杂的动画效果，包括打字效果。通过...
  • 一个拖拽卡顿问题引发出对setTimeOut的探索
    2021-02-24 08:57
    _猫力Molly_的博客 就在前不久，同事写了一个拖拽左边菜单栏改变菜单栏宽度从而得到更好的交互体验效果。But ！ 美中不足的是拖拽的时候如果手速过快，会导致卡顿效果，看起来十分难受。经过不断调试，最终是使用了setTimeout解决了该...
  • 见证奇迹：我的小程序AI聊天界面重获新生
    2025-01-21 08:52
    京河小蚁的博客 你是否好奇一个聊天界面是如何从"将就能用"变成"好用又好看"的？今天，我想和大家分享我的小程序优化之旅，看看开发者是如何一步步解决问题的。
  • 【工作经历/项目经历】-2025
    2024-12-05 16:59
    CodingMark的博客 例如，在一个简单的手机应用原型设计中，用户在一个页面上修改了一个按钮的文本内容，从 “提交” 改为 “保存”。首先，该操作会被前端捕获，数据层的相应存储模块会更新该按钮的文本数据，并记录下更新操作。然后...
  • 10 个不错的 CSS 小技巧
    2022-06-14 08:00
    前端开发博客的博客 很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。1. 打字效果网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活的一样。在...
  • Google 环聊-crx插件
    2021-03-08 10:39
    在 Chrome 操作系统和 Windows 上，全新的环聊 Chrome 应用提供了你所喜爱的所有功能，帮助你与朋友时刻顺畅沟通（无论他们使用何种设备）。 环聊 Chrome 应用的新功能： -- 原生应用，出色体验。环聊会在后台运行，...
  • 我收集的jquery游戏全集
    2010-06-25 12:04
    "我收集的jQuery游戏全集"是一个独特的资源集合，它汇聚了众多利用jQuery技术构建的在线游戏，包括经典如俄罗斯方块、摇奖、认键盘和贪吃蛇等，为用户提供了丰富的互动娱乐体验。 jQuery，这个轻量级的JavaScript库...
  • 硬件趣学python编程_没有人比我更懂编程，慧编程'吮指编辑器'，简单快乐学python...
    2020-12-06 14:36
    weixin_39880666的博客 大家好，我是偶尔写文章的康康老师。今天跟大家介绍的是慧编程家的，睡在Scratch上铺的兄弟——慧编程Python编辑器。这是一款集才华和颜值为一体的'吮指'编辑器！忘记肯德基，你的手指应该为编程而生！话不多说先看...
  • 2 C 语言开发工具的选择与配置：VS Code 与 MinGW 的安装、优化设置、快捷键及插件扩展推荐
    2024-08-13 13:48
    Thanks_ks的博客 每个设置都是一个键值对，其中键是设置的名称（通常是一个字符串），值是该设置的配置值（可以是字符串、数字、布尔值、数组或另一个 JSON 对象）。 2.4.2 编辑 settings.json 我们可以通过 UI 界面编辑设置偏好或...
  • springboot基于微信小程序的校园外卖系统 毕业设计-附源码091024
    2023-03-13 09:00
    yuyuxun1的博客 一个充分利用碎片化时间，简化点餐过程的程序，正是我们所需要的。这篇文章研究了基于springboot的校园外卖微信小程序的开发和实现，从需求分析、总体设计到具体实现，最终完成了整个校园外卖微信小程序，从而方便了...
  • 软件案例分析-音乐软件界的卧龙凤雏-酷狗音乐与网易云音乐
    2022-03-17 10:46
    BrownSearch的博客 这个作业在哪个具体方面帮助我实现目标 深入分析软件的功能与问题，学习如何进行软件测评以及调研市场需求 Part0 前言 现在许多人生活中都离不开音乐，而当前主要的听音乐方式毫无疑问就是各种音乐软件，包括...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 8月13日
  • 已采纳回答 8月5日
  • 创建了问题 8月1日