会动的边框

复制代码

<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 @   喆星高照  阅读(181)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛