2024年04月12日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
利用css实现一个文字一个一个出现的效果，前段时间无意间看到的一个效果，就百度了一下，给大家整理解释一下。
<style>
.running{
max-width: 500px;
height: 60px;
margin: 100px auto;
text-align: center;
}
.running h3{
font-size: 40px;
line-height: 60px;
width: 100%;
white-space: nowrap;
overflow: hidden;
-webkit-animation: dy 3s steps(60, end) infinite;
animation: dy 3s steps(50, end) infinite;
}
@-webkit-keyframes dy {
from {
width: 0;
}
}
@keyframes dy {
from {
width: 0;
}
}
</style><div class="running"> <h3>懒猪-专注前端行业精选</h3> </div>
本文链接：http://so.lmcjl.com/news/1878/