简单免费模板_成都 网站开发公司_百度关键词排名查询工具_智能优化大师下载

旋转流光

// html
<div class="demo"><div class="demo-content">旋转流光</div>
</div>
------------------------------------------------------
// 样式
body {background-color: black;
}:root {--outer-radius: 0.5rem;--border-size: 5px;
}@property --border-gradient-angle {syntax: "<angle>";inherits: true;initial-value: 0turn;
}.demo {background-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, transparent, #70ffaf 14%, transparent 17%);border-radius: var(--outer-radius);background-size: contain;padding: var(--border-size);animation: buttonBorderSpin 9s linear infinite 0ms;width: 300px;height: 200px;
}@keyframes buttonBorderSpin {0% {--border-gradient-angle: 0turn;}100% {--border-gradient-angle: 1turn;}
}.demo-content {width: 100%;height: 100%;background-color: black;
}

平移流光

// html
<div class="demo2"><div class="demo2-content">平移流光</div>
</div>
----------------------------------------------------------------
// 样式
:root {--outer-radius: 0.5rem;--border-size: 5px;
}@property --border-gradient-angle {syntax: "<angle>";inherits: true;initial-value: 0turn;
}
.demo {margin-top: 10px;height: 50px;width: 300px;background-image: conic-gradient(from var(--border-gradient-angle) at 30% -30%, transparent 25%, #70ffaf 75%, transparent);animation: badgeBorderSpin 10s linear infinite;border-radius: var(--outer-radius);padding: var(--border-size);
}@keyframes badgeBorderSpin {0% {--border-gradient-angle: 0turn;}100% {--border-gradient-angle: -1turn;}
}.demo-content {width: 100%;height: 100%;background-color: black;
}