css写一个按钮流光动画效果

最新推荐文章于 2024-08-23 10:21:04 发布

笑一个吧66

最新推荐文章于 2024-08-23 10:21:04 发布

阅读量618

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45132984/article/details/141091503

版权

规则说明

按钮实现一个简易的流光动画

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%;
    }  
 }