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%;
    }  
 }
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui