?> 背景知识：:point_right: animation, animation-timing-function
<script v-pre type="text/x-template" id="blink"> <style> main { width: 100%; height: 229px; display: flex; justify-content: center; align-items: center; } span { display: inline-block; width: 21ch; font: bold 200% Consolas, Monaco, monospace; /*等宽字体*/ overflow: hidden; white-space: nowrap; font-weight: 500; border-right: 1px solid transparent; animation: typing 10s steps(21), caret .5s steps(1) infinite; } @keyframes typing{ from { width: 0; } } @keyframes caret{ 50% { border-right-color: currentColor} } </style> You-need-to-know-css! <script> </script> </script>!> 此方法仅限单行等宽字体~
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>