css炫彩边框

效果：

html:
 

   <div class="container">

                <div>出勤人数</div>

                <div>{{ this.detailString.employeeCountNumber }}人</div>

            </div>
css
 

.container {

    width: 25%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    position: relative;

    color: #333;

    border: 2px solid #0b7ffe;

    border-radius: 10px;

    background: #fff;

    transition: all 0.3s;

}

.container::before {

    content: '';

    position: absolute;

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

    border: 2px solid #ff7f24;

    border-radius: 10px;

    animation: div5Ani 3s infinite linear;

}

.container::after {

    content: '';

    position: absolute;

    top: -10px;

    left: -10px;

    right: -10px;

    bottom: -10px;

    border: 2px solid #00ee00;

    border-radius: 10px;

    animation: div5Ani 3s infinite linear;

}

@keyframes div5Ani {

    0%,

    100% {

        clip-path: inset(0 0 98% 0);

    }

    25% {

        clip-path: inset(0 98% 0 0);

    }

    50% {

        clip-path: inset(98% 0 0 0);

    }

    75% {

        clip-path: inset(0 0 0 98%);

    }

}

.container::after {

    animation: div5Ani 3s infinite -1.5s linear;

}