百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-01 17:00:49浏览:1729分类: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>


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯