css3 动画 -- 旋转线条 rotate

css3 动画 -- 旋转线条 rotate_line

1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #111;
}
.box {
   200px;
  height: 200px;
  background: url(./avatar.jpg) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box::before,
.box::after {
  content: "";
  border: 2px solid #2ecc71;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -15px;
  /* clip: rect(top, right, bottom, left); */
  animation: borderClip 8s linear infinite;
}
.box::after {
  animation-delay: -4s;
}
.box:hover::before,
.box:hover::after {
  animation-play-state: paused;
}
@keyframes borderClip {
  0%,
  100% {
    clip: rect(0px, 230px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 230px, 0px);
  }
  50% {
    clip: rect(228px, 230px, 230px, 0px);
  }
  75% {
    clip: rect(0px, 230px, 230px, 228px);
  }
}

3.效果图