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