css border 实用好看的动画

1.边框流动的动画

 #div1{

            width: 500px;height: 400px;position: relative;    margin: 0  auto;

        }

        #div1::before{

            content: ''; position: absolute;top: 0; bottom: 0; left: 0；right: 0;

            border: 2px solid gold;

            animation: clippath 3s infinite linear;

        }

        @keyframes clippath  {

            0%,100% {clip-path: inset(0 0 95% 0); }

            25% { clip-path: inset(0 95% 0 0);}

            50% {clip-path: inset(95% 0 0 0); }

            75% {clip-path: inset(0 0 0 95%);}

        }

2.通过渐变使用渐变边框动画 上图2

 #div2{

            width: 200px;

            height: 100px;

            border: 10px solid ;

            border-image: linear-gradient(45deg,gold,deeppink) 1;

            animation: filter 6s infinite linear;

            clip-path: inset(0px round 10px);

            filter: hue-rotate(360deg);

        }

        @keyframes filter {

            0%{filter: hue-rotate(0deg); }

            100%{ filter: hue-rotate(360deg); }

        }

        border: 3px solid;

         border-image: -webkit-linear-gradient(31deg, #1bd8d1, rgba(27,216,209,0.1), rgba(27,216,209,0), rgba(27,216,209,0), rgba(27,216,209,0.1), #1bd8d1) 10 10;