css流光边框

/* css流光边框 */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, #ff6b6b, #f79e89, #ff6b6b, #f79e89);
  animation: animate 5s linear infinite;
  z-index: -1;
}

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

解释说明：

1. HTML结构：

   • body：使用Flexbox布局将.box元素居中显示。
   • .box：一个正方形的盒子，作为展示流光边框的对象。

2. CSS样式：

   • .box::before：创建一个伪元素，用于生成流光效果。它是一个比.box大的矩形，背景使用了线性渐变色，并且通过动画旋转来产生流光效果。
   • @keyframes animate：定义了一个从0度到360度的旋转动画，持续时间为5秒，无限循环。

这段代码会在页面中央显示一个带有流光边框的白色方块。