1、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test {
width: 428px;
height: 32px;
border: 1px solid black;
text-align: center;
}
#gradent {
background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
/*-webkit-text-fill-color: transparent;*/
-webkit-animation: slidetounlock 3s infinite;
line-height: 32px;
display: inline-block;
width: 200px;
}
@keyframes slidetounlock {
0% {
background-position: -100px 0
}
100% {
background-position: 100px 0
}
}
</style>
</head>
<body>
<div onclick="test()" class="test">
<span id="gradent">請按住滑塊，拖動到最右邊</span></div>
</body>
</html>