跃然一笑
仅举个粗糙的例子:<div class="border"></div>body { background: #000;}.border { position: relative; margin: 50px auto; width: 100px; height: 100px; background: #fff;}.border:after { content: ''; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; background-image: linear-gradient(to bottom, #ff0, #ff0 50%, #000 0%), linear-gradient(to bottom, #ff0, #ff0 50%, #000 0%), linear-gradient(to right, #ff0, #ff0 50%, #000 0%), linear-gradient(to right, #ff0, #ff0 50%, #000 0%); background-position: 0 0, 100% 0, 0 0,0 100%; background-repeat: repeat-y, repeat-y, repeat-x, repeat-x; background-size: 2px 10px, 2px 10px, 10px 2px, 10px 2px; animation: border 200ms linear infinite;}@keyframes border { 0% { background-position: 0 0, 100% 0, 0 0,0 100%; } 100% { background-position: 0 -5px, 100% 5px, 5px 0,-5px 100%; }}