import styles from "./test.module.css";
export default function Test() {
return (
<div className={styles.bg}>
<div className={styles.flowBorder}></div>
</div>
);
}
.bg {
height: 40px;
width: 40px;
box-sizing: border-box;
}
.flowBorder {
position: relative;
width: 40px;
height: 40px;
border-radius: 8px; /* 可选：圆角 /
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; / 隐藏超出范围的渐变背景 */
}
/* 核心：彩色旋转背景 /
.flowBorder::before {
content: "";
position: absolute;
width: 150%; / 宽高要大于父级，确保旋转时覆盖全 */
height: 150%;
background: conic-gradient(
#ff0000,
#ff8000,
#ffff00,
#00ff00,
#00ffff,
#8000ff,
#ff00ff,
#ff0000
);
animation: rotate 3s linear infinite;
}
/* 核心：遮盖层，形成“边框”视觉 /
.flowBorder::after {
content: "";
position: absolute;
inset: 2px; / 这里决定了边框的粗细，2px即为边框宽度 /
background-color: #ffffff; / 必须与背景色相同 /
border-radius: 6px; / 比父级稍微小一点点 */
}
/* 旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}