CSS给给图片添加流动边框

需求：给一张图片添加流动的边框！
效果图：
HTML

<div class="headback navC C"><div class="headborder" id="headborder"></div><img src="./img/03/a06.png" class="headimg"></div>

.JS

var headnum = 0 ;function head(){headnum+=180;ocument.getElementById("headborder").style.transform="rotateZ("+headnum+"deg)";}setInterval(head,2000);

.CSS

.headback{width: 1200px;height: 538px;position: relative;top: 50px;left: -6px;overflow: hidden;margin: 0 auto;border-radius: 12px;}.headborder{width: 0px;height: 0px;border-width: 720px;border-style: solid;border-top-color: #FEF6E1;border-left-color: #986C30;border-bottom-color: #EA0B43;border-right-color: #FFBF80;position: relative;top: -392px;left: -130px;transition: all 2s linear;transform: rotateZ(0deg);}.headimg{width: 1200px;height: 538px;position: absolute;top: 11px;left: 1px;}

全民K歌电脑版