主要思路
- 仅保留一条边框 + border-radius 50%
- drop-shadow
- 动画 animation + keyframes
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流光按钮</title><style>.wrapper{width: 900px;height: 800px;background: #111111;padding: 60px;}.item{margin: auto;position: relative;--size: 150px;height: var(--size);width: var(--size);background-color: rgba(224, 224, 224, 0.774);border-radius: 50%;border: 3px solid rgba(255, 255, 255, 0.911);color: rgb(255, 0, 179);font-weight: 800;line-height: var(--size);text-align: center;font-size: 30px;}.item::before{content: "";position: absolute;inset: -7px;border-top: 11px solid red;border-radius: 50%;filter: drop-shadow(1px 1px 5px red);z-index: 1;transition: all 1s;animation: 2.3s linear infinite spin;}.item::after{content: "";position: absolute;inset: -7px;border-bottom: 11px solid rgb(0, 60, 255);border-radius: 50%;filter: drop-shadow(1px 1px 5px rgb(0, 140, 255));z-index: 2;transition: all 1s;animation: 2.3s linear infinite spin;}@keyframes spin {0%{transform: rotate(0deg);border-width: 3px;opacity: .66;}50%{opacity: .9;border-width: 8px;}100%{transform: rotate(360deg);opacity: .66;border-width: 3px;}}</style>
</head>
<body><div class="wrapper" ><div class="item">Hello</div></div>
</body>
</html>
