会动的边框 


<html>
<title>动态的边框</title>
<style>
  .border,
  .border::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .border {
    width: 200px;
    height: 200px;
    margin: auto;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }

  .border::after {
    content: '';
    margin: -2%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 5s linear infinite;
  }

  .border::before {
    animation-delay: -4s;
  }

  @keyframes clipMe {

    0%,
    100% {
      clip: rect(0px, 220.0px, 2px, 0px);
    }

    25% {
      clip: rect(0px, 2px, 220.0px, 0px);
    }

    50% {
      clip: rect(218.0px, 220.0px, 220.0px, 0px);
    }

    75% {
      clip: rect(0px, 220.0px, 220.0px, 218.0px);
    }
  }
</style>

<body>
  <div>
    <div class="border"></div>
  </div>
</body>
</html>

 

posted @ 2020-09-30 14:00  喆星高照  阅读(181)  评论(0)  编辑  收藏  举报