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%;
    }  
 }
相关推荐
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8888 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家8 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试