一个动画渐变的科幻形按钮

大家好我是山河,今晚我给大家带来了一个很好看的按钮,动画效果很棒,代码大家自己借鉴吧。

话不多说,直接贴代码出来。

先上效果图(点击下面文字可以查看图片)

blog.shanhe.info
效果图

直接上代码

css代码块

a {
            display: block;
            width: 220px;
            height: 70px;
            z-index: 1;
        }

        a:after {
            content: '';
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            animation: gradient 3s ease-in-out infinite, border 0.5s forwards ease-in-out reverse;
        }

        a>span {
            display: block;
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease-in-out infinite;
        }

        .absolute-centering,
        body:after,
        a,
        a:after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .text-formatting,
        a {
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            letter-spacing: 2px;
            line-height: 70px;
            font-size: 28px;
        }

        @keyframes gradient {
            0% {
                background-position: 14% 0%;
            }

            50% {
                background-position: 87% 100%;
            }

            100% {
                background-position: 14% 0%;
            }
        }

        @keyframes border {
            0% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            25% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            50% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
            }

            75% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
            }

            100% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
            }
        }

html代码块

<a href="#"><span>按钮</span></a>

好了,本文到此结束。

我是山河