css写一个按钮流光动画效果

规则说明

  1. 按钮实现一个简易的流光动画
javascript 复制代码
streamer.css

.pay_button{
    width: 281*2px;
    height: 104px;
    border-radius: 80px;
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(90deg, #FFA023 0%, #FF2B87 100%);
    margin-bottom: 20px;
    font-size: 32px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    font-weight: 700;
}

.pay_button::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-45deg);
    animation: streamer 2s infinite;
  }

 // 流光动画
 keyframes streamer {
    0%{
      left: -100%;
    }
    100%{
      left: 100%;
    }  
 }
相关推荐
MiyueFE1 分钟前
bpmn-js 源码篇10:moddle-xml与bpmn-moddle - xml 与 js 对象之间的核心转换库
前端·javascript
袋鼠云数栈前端4 分钟前
基于AST实现国际化文本提取
css·sandbox
袋鼠云数栈UED团队7 分钟前
基于AST实现国际化文本提取
前端·javascript·babel
LaoZhangAI12 分钟前
【2025最新】Cursor vs Trae深度对比:AI编程工具终极对决,8大核心功能实测
前端·cursor
冰镇生鲜19 分钟前
《元素视口可见性检测 》Vue自定义指令 封装
前端·vue.js
qirong20 分钟前
夜色渐浓,众星拱月 - Threejs复刻原神绝美空月之歌场景(二)
前端·javascript·three.js
华科云商xiao徐21 分钟前
C#编写HttpClient爬虫程序示例
前端
卖报的小行家_22 分钟前
Vue2源码,响应式原理,数组
前端
蓉妹妹23 分钟前
AntDesign下,Select内嵌Menu标签,做一个多选下拉框,既可以搜索,还可以选择下拉项
前端·react.js
牛马喜喜23 分钟前
如何从零实现一个todo list(3)
前端