经过调研发现大多滑块验证码中,有一些文字流光效果,因此在这里简单实现一下。
实现主要利用background 渐变背景以及backgorund-clip:text实现。具体代码如下
css部分
javascript
.slide {
width: 300px;
height: 40px;
border: 1px solid #ccc;
border-radius: 8px;
line-height: 40px;
text-align: center;
background: -webkit-linear-gradient(
left,
#333 0,
#333 25%,
red 40%,
#fff 50%,
blue 60%,
#333 70%
);
color: transparent;
animation: sildeAnimate 3s infinite;
background-clip: text;
-webkit-background-clip: text;
}
@keyframes sildeAnimate {
0% {
background-position: -150px 0;
}
100% {
background-position: 150px 0;
}
}
html部分
html
<div class="slide">请按住滑块进行验证</div>