CSS实现打字机效果
/* 定义打字机动画 */ @keyframes typing { from { width: 0; } to { width: 100%; } } /* 定义光标动画 */ @keyframes blink { 50% { border-color: transparent; } } /* 定义样式 */ .typewriter { border-right: .15em solid orange; /* 设置光标 */ white-space: Nowrap; /* 不换行 */ overflow: hidden; /* 隐藏超长部分 */ font-size: 24px; animation: typing 2s steps(30,end),blink .5s step-end infinite; }
<div class="typewriter"> <p> CSS实现打字机效果 </p> </div>
CSS实现打字机效果
使用这个CSS效果可以给网页带来一些装饰性,并且可以增强读者的阅读体验。希望这个简单的示例对您有所帮助。