边框旋转(css动画实现)

最新推荐文章于 2024-09-17 19:10:32 发布

摸鱼啦啦啦

最新推荐文章于 2024-09-17 19:10:32 发布

阅读量970

点赞数

分类专栏：前段文章标签： javascript css

本文链接：https://blog.csdn.net/m0_61889116/article/details/126365847

版权

前段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        background: #000;
      }
      button {
        width: 100px;
        height: 50px;
        border-radius: 10px;
        border: none;
        outline: none;
        outline: 4px solid transparent;
        background: none;
        color: #fff;
        font-size: 20px;
        position: relative; // 定位
        overflow: hidden; // 超出隐藏
      }
      button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 100px;
        background-color: red;
        z-index: -2;  // 层级降低 露出文字
        animation: Rotate 3s linear infinite;  // 动画
        transform-origin: 0 0;  // 旋转中心点
      }
      // 盖住before伪类的背景颜色
      button::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 4px;
        background: #000;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        border-radius: 10px;
        z-index: -1;
      }
      /* 旋转 */
      @keyframes Rotate {
        to {
          transform: rotate(1turn);  // 一周
        }
      }
    </style>
  </head>
  <body>
    <button>边框动画</button>
  </body>
</html>