我希望創(chuàng)建一個(gè)類似于這個(gè)Dribbble帖子中顯示的動(dòng)畫邊界輸入:https://dribbble.com/shots/20266537-Login-page.

目前，我有一個(gè)使用背景圖像的想法，但它不支持邊框半徑。你可以在這里找到我的代碼:https://codepen.io/duy-tnh/pen/bGQdWPE. `

@keyframes bg {
0% {
  background-size: 0% 3px, 3px 0, 0 3px, 3px 0;
  background-position: 70px -2px, calc(100% + 2px) -1px, 100% 100%,
    -2px 100%;
}
20% {
  background-size: 90% 3px, 3px 0, 0 3px, 3px 0;
  background-position: 70px -2px, calc(100% + 2px) -1px, 100% 100% 
-2px 100%;
}
40% { 
  background-size: 90% 3px, 3px calc(100% + 2px), 0 3px, 3px 0;
  background-position: 70px -2px, calc(100% + 2px) -1px,
    calc(100% + 1px) calc(100% + 2px), -2px 100%;
}
60% {
  background-size: 90% 3px, 3px calc(100% + 2px), calc(100% + 2px) 
3px,
    3px 0;
  background-position: 70px -2px, calc(100% + 2px) -1px,
    calc(100% + 1px) calc(100% + 2px), -2px 100%;
}
100% {
  background-size: 100% 3px, 3px calc(100% + 2px), calc(100% + 2px) 
3px,
    3px calc(100% + 2px);
  background-position: 0 -2px, calc(100% + 2px) -1px,
    calc(100% + 1px) calc(100% + 2px), -2px 100%;
/*        border: 2px solid #82c0fe; */
}
}

.box {
position:relative;
border-radius:10px;
  border: 1px solid #ccc;
width: 25%;
margin: 2rem auto;  
padding: 2em;
background-repeat: no-repeat;
background-image:   linear-gradient(to right, #5D26C1, #a17fe0, #59C173),
                    linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173),
                    linear-gradient(to right,#5D26C1, #a17fe0, #59C173),
                    linear-gradient(to bottom, #5D26C1, #a17fe0, #59C173);
animation: bg 2s forwards 1; 
}`

我將感謝任何援助或替代的想法，你可能會(huì)達(dá)到預(yù)期的效果。謝謝大家！