css实现按钮边框旋转

本文介绍: 本质：一个矩形在两个矩形互相重叠遮盖形成的缝隙中旋转形成

先上效果图

在这里插入图片描述

本质：一个矩形在两个矩形互相重叠遮盖形成的缝隙中旋转形成，注意css属性z-index层级关系

在这里插入图片描述

直接上代码

  <div class="bg">
    <div class="button">按钮</div>
  </div>
  
  <style>
	.bg {
	  width: 100%;
	  height: 100vh;
	  background-color: #000;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}


	@keyframes run {
	  0% {
	    transform: rotate(0);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}

	.button {
	  width: 200px;
	  height: 100px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  overflow: hidden;  /* 关键属性 */
	  color: #fff;
	  z-index: 1;
	  border-radius: 4px;
	}
	.button::before {
	  content: "";
	  width: 200%;
	  height: 200%;  /* 调整此处宽高控制旋转边框的长度 */
	  position: absolute;
	  background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
	  z-index: -2;
	  left: 50%;
	  top: 50%;
	  animation: run 1.5s linear infinite;
	  transform-origin: left top;
	}
	.button::after {
	  content: "";
	  position: absolute;
	  --w: 2px; /* 控制宽度 */
	  width: calc(100% - 2 * var(--w));
	  height: calc(100% - 2 * var(--w));
	  left: var(--w);
	  top: var(--w);
	  background: #000;
	  z-index: -1;
	  border-radius: inherit;
	}
  </style>