css：clip元素裁剪实现Loading加载效果边框

news2024/12/23 8:30:00

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。

警告：这个属性已被废弃。建议使用 clip-path

文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

语法

/* 标准语法 */
clip: rect(<top>, <right>, <bottom>, <left>);

/* 向后兼容语法 */
clip: rect(<top> <right> <bottom> <left>);   

/* 默认值。不应用任何剪裁 */
clip: auto;

/* 从父元素继承 clip 属性的值 */
clip: inherit;

top 和 bottom 指定相对于盒子上边框边界 的偏移
right 和 left 指定了相对于盒子左边框边界 的偏移

截取各个边框

在这里插入图片描述
实现代码

<style>
  .box-wrap {
    display: flex;
    column-gap: 20px;
  }

  .box {
    position: relative;
    height: 200px;
    width: 200px;

    background-color: green;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 200px;
  }

  .box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
  }

  .box-top::before {
    /* 上边框 */
    clip: rect(0 200px 2px 0);
  }

  .box-bottom::before {
    /* 下边框 */
    clip: rect(198px, 200px, 200px, 0);
  }

  .box-left::before {
    /* 左边框 */
    clip: rect(0, 2px, 200px, 0);
  }

  .box-right::before {
    /* 右边框 */
    clip: rect(0, 200px, 200px, 198px);
  }
</style>

<div class="box-wrap">
  <div class="box">box</div>
  <div class="box box-top">box-top</div>
  <div class="box box-bottom">box-bottom</div>
  <div class="box box-left">box-left</div>
  <div class="box box-right">box-right</div>
</div>

实现Loading加载效果边框

在这里插入图片描述

实现代码

<style>
 .box {
    position: relative;
    height: 200px;
    width: 200px;

    background-color: green;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 200px;
  }

  .box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #cd0000;
    animation: borderAround 1.5s infinite linear;
  }

  @keyframes borderAround {
    0%,
    100% {
      clip: rect(0 200px 2px 0);
    }
    25% {
      clip: rect(0, 200px, 200px, 198px);
    }
    50% {
      clip: rect(198px, 200px, 200px, 0);
    }
    75% {
      clip: rect(0, 2px, 200px, 0);
    }
  }
</style>

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