边框线条效果如上
/*边框虚线滚动动画特效*/ .border-animate { background: linear-gradient(90deg, gray 60%, transparent 60%) repeat-x left top/10px 1px, linear-gradient(0deg, gray 60%, transparent 60%) repeat-y right top/1px 10px, linear-gradient(90deg, gray 60%, transparent 60%) repeat-x right bottom/10px 1px, linear-gradient(0deg, gray 60%, transparent 60%) repeat-y left bottom/1px 10px; animation: border-animate .382s infinite linear; } @keyframes border-animate { 0% { background-position: left top, right top, right bottom, left bottom; } 100% { background-position: left 10px top, right top 10px, right 10px bottom, left bottom 10px; } }