CSS实现炫彩字样式

<style>    
    /*炫彩字*/
    #Dearlicy-copy {
        font-weight:600;
        color:#8c888b;
        /*渐变背景色*/
        background:-webkit-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);
        background:-moz-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);
        background:-ms-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);
        color:transparent;/*将文字的颜色设置为透明*/
        -webkit-background-clip:text;/*背景图只会显示在文字的部分*/
        /*将名为ran的动画应用到这个元素上，动画持续时间为20秒，线性过渡（linear），并且无限循环（infinite）*/
        animation:ran 20s linear infinite
    }
    /*定义了一个名为ran的关键帧动画*/
    @keyframes ran {
        from {
            backgroud-position:0
        }
        to {
            background-position:2000px 0
        }
    }
    /*图片炫彩边框*/
    .footer-miniimg {
        p{
            position: relative;
            &:hover {
                filter: contrast(1.1);
            }
            
            &:active {
                filter: contrast(0.9);
            }
            &::before,
            &::after{
                content: "";
                border: 2px solid;
                border-image: linear-gradient(45deg, gold, deeppink) 1;
                position: absolute;
                top: -5px;
                left: -5px;
                right: -5px;
                bottom: -5px;
                animation: clippath 3s infinite ;
            }
            &::before{
                animation: clippath 3s infinite -1.5s linear;
            }
        }
    }

    @keyframes clippath {
        0%,
        100% {
            clip-path: inset(0 0 96% 0);
            filter: hue-rotate(0deg);
        }
        25% {
            clip-path: inset(0 96% 0 0);
        }
        50% {
            clip-path: inset(96% 0 0 0);
            filter: hue-rotate(360deg);
        }
        75% {
            clip-path: inset(0 0 0 96%);
        }
    }
</style>