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 0 Comments

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


本文链接：https://my.lmcjl.com/post/20993.html

展开阅读全文

相关文章

4 评论

留下您的评论.