css3 文字高光划过,js css3文字高光滑过动画特效

特效描述：js css3文字高光滑过 动画特效。js仿iphone触屏滑动解锁文字高光动画特效。

代码结构

1. HTML代码

body{background:#222;text-align:center;}

#phone{width:1100px;margin:0 auto;display:inline-block;margin:50px;font-size:150px;font-weight:bold;color:rgba(255,255,255,0.3); background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,1) 240px,rgba(255,255,255,0) 300px) -300px 0 no-repeat; -webkit-background-clip:text;}

我爱你

var ph=document.getElementById("phone");

var otime=null;

var num=-300;

function tomove(){

otime=setInterval(function (){

num+=10;

if(num==1100)

{

num=-300;

clearInterval(otime);

}

ph.style.backgroundPosition=num+"px 0px";

},20)

}

tomove();

setInterval(function(){

tomove();

},3000);