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%;
    }  
 }
相关推荐
小桥风满袖9 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang9 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户730870117930810 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼10 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu10 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin10 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者10 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang10 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin11 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒11 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端