css 实现文字流光效果

经过调研发现大多滑块验证码中,有一些文字流光效果,因此在这里简单实现一下。

实现主要利用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>
相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax