用边框动画两条线旋转效果

以下是用CSS实现的边框动画两条线旋转效果：

HTML代码：

<div class="box">
  <div class="line1"></div>
  <div class="line2"></div>
</div>

CSS代码：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border: 2px solid #000;
}

.line1,
.line2 {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: center;
}

.line1 {
  top: 0;
  left: 0;
  animation-delay: 1s;
}

.line2 {
  bottom: 0;
  right: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

解释：

首先，我们创建一个包含两条线的盒子，并设置盒子的边框为2px的黑色实线。

然后，我们用绝对定位将两条线放在盒子的对角线位置。其中，第一条线的动画延迟1s开始，这样两条线就可以错开动画，形成旋转的效果。

接着，我们创建一个名为“rotate”的关键帧动画，使两条线旋转一周。动画中，我们用transform属性设置元素的旋转角度。

最后，我们将动画应用到两条线上，并设置动画的持续时间和循环次数。同时，我们将transform-origin属性设置为center，这样可以使元素绕中心点旋转。