<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#box{ width:400px;
height:50px;
border-radius: 10px;
line-height: 50px;
text-align: center;
margin: 200px auto;
font-size: 20px;
background: black;
position: relative;}
#box #span{-webkit-background-clip: text;
color: rgba(255,255,255,1);
-webkit-user-select: none;
background: -webkit-linear-gradient(135deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 24%, rgba(255,255,255,0.7) 25%, rgba(255,255,255,0.7) 35%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 100%);}
#box img{position: absolute;
width: 60px;
height: 50px;
left: 0px;
cursor: pointer;
top: 1px;
display: block;}
/*#box #span:hover{background-position:100px 0,250px 0;}*/
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('box');
var oDiv2=document.getElementById('img');
var oSpan=document.getElementById('span');
var obj=null;
setInterval(function(){
setInterval(function()
{
var dis=200-oSpan.offsetWidth;
if(dis<20)
{
var time=oSpan.style.left=2+"px";
}
oSpan.style.transition="width 3s";
/* console("time");
*/ },1000)
},5000);
oDiv2.onmousedown=function(ev)
{
var ev=ev||window.event;
var obj=oDiv2;
var disL=ev.clientX-this.offsetLeft;
window.onmousemove=function(ev)
{
var ev=ev||window.event;
var left=ev.clientX-disL;
if(left<0)
left=0;
if(left>oDiv1.offsetWidth-oDiv2.offsetWidth)
left=oDiv1.offsetWidth-oDiv2.offsetWidth;
obj.style.left=left+'px';
}
}
window.onmouseup=function()
{
obj=null;
}
}
</script>
</head>
<body>
<div id="box">
<strong><span id="span">Slide To Unlock</span></strong>
<img id="img" draggable="false" src="../滑动解锁/img/arrow.png"/>
</div>
</body>
</html>Stardust1001