我想要在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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
- ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
- ¥15 可见光定位matlab仿真
- ¥15 arduino 四自由度机械臂
- ¥15 wordpress 产品图片 GIF 没法显示