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

Question

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

Answer 1

仅举个粗糙的例子:

<p class="border"></p>

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%;
  }
}

Answer 2

可能你不知道这叫什么，这叫蚂蚁线边框。百度一下就OK了。
第一种方法就是用小gif，铺满后面的背景，只露个边。然后看到蚂蚁线边框。
第二种方法就是CSS3动画。gif当然不好找，最好是CSS3动画。