html
<body><p class="line animation">我和我的祖国，一刻也不能分割</p>
</body>
css
<style type="text/css">html,body {height: 100%;}body {overflow: hidden;display: flex;justify-content: center;align-items: center;/* background: #222; */}.line {width: 674px;border-right: 2px solid #eee;font-size: 28px;text-align: center;white-space: nowrap;overflow: hidden;color: #5ec4ff;background: linear-gradient(0deg, #5ec4ff 0%, #ffffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.animation {animation: grow 4s steps(44) 1s normal both,blink 0.5s steps(44) infinite normal;}@keyframes grow {from {width: 0;}to {width: 400px;}}@keyframes blink {from {border-right-color: #eee;}to {border-right-color: #222;}}</style>
