前端 CSS 经典:旋转边框效果

效果:

**思路:**使用伪元素,给伪元素设置背景色,然后定位,遮盖,旋转。就可以实现旋转边框效果。

实现代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>document</title>
    <style>
      body {
        background: #000;
      }
      button {
        margin: 50px 40%;
        width: 200px;
        height: 80px;
        color: #fff;
        font-size: 24px;
        background: #000;
        border: none;
        outline: none;
        z-index: 1;
        border-radius: 10px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      button::before {
        content: "";
        width: 200px;
        height: 200px;
        position: absolute;
        background: orange;
        z-index: -2;
        left: 50%;
        top: 50%;
        transform-origin: left top;
        animation: rotating 2s linear infinite;
      }

      button::after {
        content: "";
        position: absolute;
        --g: 4px;
        width: calc(100% - var(--g) * 2);
        height: calc(100% - var(--g) * 2);
        background: #000;
        left: var(--g);
        top: var(--g);
        border-radius: inherit;
        z-index: -1;
      }

      @keyframes rotating {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <button>按钮</button>
    <script></script>
  </body>
</html>
相关推荐
G等你下课2 分钟前
动手实现一个简易前端路由:理解 React Router 的本质
前端·javascript·react.js
Mintopia2 分钟前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
南岸月明2 分钟前
新人开启副业,这些坑你一定要知道
前端
懒羊羊大王&7 分钟前
5、qt系统相关
前端·qt
江城开朗的豌豆11 分钟前
Vue3 数据绑定的进化:为什么Proxy取代了defineProperty
前端·javascript·vue.js
DoraBigHead17 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我19 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马26 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆27 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder28 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构