请问有没有什么属性可以让边框线围绕着图片动起来

Question

各位大神，请问有没有什么属性可以让边框线围绕着图片动起来,或者有方法可以实现这样的效果。

Answer 1

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