react或者vue 如何实现ChatGPT 光标文字追随 效果?-灵析社区

米小米会努力

实现下面图中效果,? ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241125/07cc7747f2bebd87b66a9c1f70e98a48.png)

阅读量:23

点赞量:0

问AI
我自己实现了 &:last-child{ // 如果ai输出结束了,刚不显示伪元素after .stop > *:last-child{ &:after{ content: none !important; } } // 节点空时设置光标跟随 .chat:empty{ position: relative; &:after{ display: inline-block; content: ""; width: 4px; height: 14px; transform: translate(4px,2px) scaleY(1.3); background-color: #80c9ff; animation: cursor .6s infinite; overflow-wrap: break-word; box-sizing: border-box; } } // 获取最后一个子节点并设置光标跟随 .chat > *:last-child { position: relative; &:after{ display: inline-block; content: ""; width: 4px; height: 14px; transform: translate(4px,2px) scaleY(1.3); background-color: #80c9ff; animation: cursor .6s infinite; overflow-wrap: break-word; box-sizing: border-box; } } } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241125/def1c8fd80dd7e69d5e24195a38e952e.png)