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>
相关推荐
云中雾丽2 分钟前
react中 所有给 children 传值的方式
前端
加蓓努力我先飞3 分钟前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端5 分钟前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一6 分钟前
vite框架下大屏适配方案
前端·vue.js·响应式设计
有点笨的蛋7 分钟前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV7 分钟前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
文心快码BaiduComate14 分钟前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员
inx17715 分钟前
HTML 敲击乐 PART--2
javascript·css
社恐的下水道蟑螂20 分钟前
用CSS3拍一部《星球大战》片头?前端导演的"原力"修炼指南
前端·javascript
子非鱼37323 分钟前
git 常用命令行
前端