CSS圆形旋转边框

 .abackimg {
 div{
        position: relative;
        text-align: center;
        font-size: 24px;
        width: 100%;
        height: 100%;
        border: 2px solid rgb(179, 191, 231);
        border-radius: 50%;
        transition: all .3s;
        &::before, &::after {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid rgb(17, 36, 100);
            transition: all .5s;
            animation: clippath 3s infinite linear;
            // background-color: aquamarine;
        border-radius: 50%;
        clip-path: polygon(50% 50%, 100% 46%, 100% 23%, 100% 0, 74% 0, 53% 0, 15% 0);
        }
        &::after {
            animation: clippath 3s infinite -1.5s linear;
        }
        @keyframes clippath {
            0%{-webkit-transform:rotate(0deg);}
            25%{-webkit-transform:rotate(90deg);}
            50%{-webkit-transform:rotate(180deg);}
            75%{-webkit-transform:rotate(270deg);}
            100%{-webkit-transform:rotate(360deg);}
        }

    }
  }