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

Question

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

Answer 1

仅举个粗糙的例子:

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

  }

}