css写一个按钮流光动画效果
规则说明
- 按钮实现一个简易的流光动画
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%;} }