css實現動態邊框

本文轉載自查看原文 2020-01-08 16:38 2213 css/ CSS之路

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS - 實現熒光邊框關於純JS實現動態邊框的理解 css實現圖像邊框的樣式用純css實現雙邊框效果 HTML CSS邊框陰影的實現利用CSS3實現透明邊框和多重邊框 css+div實現各種常見邊框 css3 如何實現圓邊框的漸變 CSS3實現邊框鋸齒效果 css2.1實現圓角邊框