css - 在CSS中为元素周围的边框设置动画

Question

webkit css 动画的代码是什么，它从一个 Angular 跟踪元素(比如 div 或标题)周围的边界，围绕整个元素结束回到原始 Angular ？

通俗地说，如果有人用铅笔在元素周围的一行中画了一个矩形。

效果必须是永久性的，而不仅仅是当用户将鼠标悬停在元素上时才会出现。

Answer 1

也许是这样的？

@keyframes pencil {
  0% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #000 #fff #fff #fff;
  	top:0%;
    left: 0%;
  }
  25% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #000 #fff #fff;
  	top:0%;
    right: 100%;
  }
  50% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #000 #fff;
  	top:100%;
    right: 100%;
  }
  75% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #000;
  	top:100%;
    right: 0%;
  }
  100% {
  	transition: border-color 0.5s ease-in-out 0.25s;
  	border-color: #fff #fff #fff #fff;
  	top:0%;
    right: 0%;
  }
}

.pencil-border {
	border: 2px solid #fff;
  animation: pencil 2s infinite linear;
}

<div class="pencil-border">
Test
</div>