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>
相关推荐
程序员爱技术38 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js