css实现一个打字跑动效果 文字一个一个渐渐出来效果

利用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>

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓