实现【打字机动画】的两种办法
动画 实现 两种 办法
2023-09-11 14:19:07 时间
打字机动画是一个很常见的动画效果,实现的方式也有很多
最近在项目中刚好遇到了类似的需求,整理了几个实现动画的方法,分享一下~
方法一、
效果最好的打字机动画
通过 js 的定时器增减文字,单独用一个标签来写光标动画,这样即使文字换行也能良好呈现
HTML
<div class="typing"> <span class="typing-text">这是一个传说中的打字动画</span> <i class="caret"></i> </div>
CSS
.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-bottom: -2px; margin-left: -2px; background-color: #333; animation: blink-caret .5s step-end infinite; } @keyframes blink-caret { 50% {opacity: 0;} }
JS
var box = document.getElementsByClassName('typing-text')[0]; var str = box.innerText; var i = 0; box.innerText = ''; var typing = setInterval(function() { box.innerText += str[i++]; i >= str.length && clearInterval(typing); }, 200);
方法二、
在网上找的方法,纯 CSS3 做的动画
通过限定宽度配合 overflow:hidden 来实现文字添加的效果,使用 border 做光标
<style type="text/css"> .typing { border-right: .1em solid; width: 9em; /*宽度为“字数 + em”*/ white-space: nowrap; overflow: hidden; animation: typing 5s steps(9, end), /*步数为字数*/ blink-caret .5s step-end infinite alternate; } @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50% { border-color: transparent; } } </style> <div class="typing">这是一个打字机动画</div>
这种办法的优点就是不用写 js,但有很多的局限性:
比如文字不能自动换行,元素宽度还需要手动设置
当文字是英文的时候,必须使用 Consolas 之类的等宽字体
相关文章
- 关于Unity动画系统优化,你可能遇到这些问题
- uniapp - 点赞动画插件
- flutter ScaleTransition实现缩放动画
- uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序
- [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画
- 少儿学编程系列 --- 使用Python Turtle动画演示汉诺塔(Tower of Hanoi)如何移动
- XamarinAndroid组件教程设置自定义子元素动画(一)
- 如何用Swift创建一个复杂的加载动画
- iOS 实现启动屏动画(Swift实现,包含图片适配)
- SwiftUI 动画特效之代码雨组建电影特性(项目含源码)
- SwiftUI 动画之绘制仿心跳曲线动画 (教程含源码)
- Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
- [一位菜鸟的COCOS-2D编程之路]COCOS2D中得动作,特效和动画
- Pr字幕制作和动态动画效果字幕制作