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%;
    }  
 }
相关推荐
excel6 分钟前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着18 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名?
前端·后端·安全
会豪4 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js