资源

网址

• Gif 效果图

七彩动画.gif

源码

.create-button {
    text-align: left;
    font-size: 1.2rem;
    border: none;
    margin-right: 0;
    position: relative;
    background: none;
    color: white
}

.create-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: -webkit-gradient(linear, left top, right top, from(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), color-stop(#47cf73), color-stop(#0ebeff), color-stop(#ffdd40), color-stop(#ae63e4), to(#47cf73));
    background: linear-gradient(90deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
    background-size: 200% 200%
}

.create-button:focus::after,.create-button:hover::after {
    -webkit-animation: rainbow-border 1.5s linear infinite;
    animation: rainbow-border 1.5s linear infinite
}

@-webkit-keyframes rainbow-border {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 200% 50%
    }
}

@keyframes rainbow-border {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 200% 50%
    }
}