效果:
思路:使用伪元素,给伪元素设置背景色,然后定位,遮盖,旋转。就可以实现旋转边框效果。
实现代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="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>