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%;
    }  
 }
相关推荐
qq_424409197 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding8 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜9 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD10 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding11 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子81623 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴3 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化3 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl