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>
相关推荐
小桥风满袖35 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端