css按钮渐变

需要用到animation和linear-gradient

.aaa {
            margin: 100px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: linear-gradient(90deg, #CFAB57, rgba(0,0,0,0.1), #AF914A);
            background-size: 400%;
            background-position: 100% 0%; 
            animation: bganimation 1s ease-in-out infinite;
        }

        @keyframes bganimation {
            0%{
                background-position: 100%;
            }
            50% {
                background-position: 50%;
            }
            100%{
                background-position: 0%;
            }
        }

body如下:

<div class="aaa">这是个渐变的按钮</div>

 

posted @ 2021-03-31 13:23  人在囧途呢  阅读(82)  评论(0)    收藏  举报