Qui-Note官网Logo
导航:Qui-Note/clip

clip

<style type="text/css">
	.show-box{background-color: rgba(0,0,0,.2);}
	.show-box,.hide-box{
	    width: 520px;
	    height: 100px;
	    line-height: 100px;
	    font-size: 30px;
	    position:absolute;
	    text-align: center;
	}
	.hide-box{
	    animation: lrc 6s linear infinite;
	    -webkit-background-clip: text;
	    color: red;
	}
	@keyframes lrc{
	    0%{
	        clip:rect(0,0px,100px,0);
	    }
	    100%{
	        clip:rect(0,520px,100px,0);
	    }
	}  
</style>
<div class="show-box">我是一个粉刷匠,粉刷本领强</div>
<div class="hide-box">我是一个粉刷匠,粉刷本领强</div>

效果展示:

我是一个粉刷匠,粉刷本领强
我是一个粉刷匠,粉刷本领强
X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90