<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Google 风格 - 完整彩色光环按钮</title>
<style>
/* ---------- 全局变量 ---------- */
:root {
--qR8X0: "Google Sans", Roboto, Arial, sans-serif;
--hbmnje: 14px;
--Oycjt: 500;
--CbdmE: 36px;
--Lm570b: rgba(0, 0, 0, 0.05);
--XKMDxc: #f3f5f6;
}
body {
background: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.demo-wrapper {
background: #fff;
border-radius: 32px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
/* ---------- 按钮核心样式 ---------- */
.plR5qb {
align-self: center;
background: inherit;
border-radius: 100px;
cursor: pointer;
flex-shrink: 0;
font-family: var(--qR8X0);
font-optical-sizing: none;
font-size: var(--hbmnje);
font-weight: var(--Oycjt);
line-height: var(--CbdmE);
margin-inline-start: 8px;
padding: 0 8px;
position: relative;
height: 36px;
border: none;
background-color: var(--XKMDxc);
outline: none;
color: #1f1f1f;
}
.plR5qb:hover::before {
background: var(--Lm570b);
content: '';
position: absolute;
inset: 0;
border-radius: 100px;
pointer-events: none;
}
/* 光环容器 */
.xL0qi, .mTurwe {
overflow: hidden;
border-radius: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.xL0qi {
opacity: 0.35;
filter: blur(2px);
}
/* 彩色光环（完整渐变，无透明段） */
.iydNQb {
background: conic-gradient(
#3186ff 0deg,
#34a853 43deg,
#ffd314 65deg,
#ff4641 105deg,
#3186ff 144deg,
#3186ff 180deg,
#3186ff 200deg,
#3186ff 260deg,
#34a853 300deg,
#ffd314 320deg,
#ff4641 340deg,
#3186ff 360deg
);
height: 200%;
top: -50%;
right: 0;
bottom: 0;
left: 0;
position: absolute;
scale: 2 1;
opacity: 0;
transform: rotate(180deg);
transition: opacity 400ms linear;
}
/* hover 时显示内层清晰光环 */
.plR5qb:not(.PHjFye):hover .mTurwe .iydNQb {
opacity: 1;
}
/* 一次性加载动画 */
.Y5MKCd .iydNQb {
animation: ae-fg 2000ms linear backwards,
ae-rg 2000ms cubic-bezier(0.20, 0.00, 0.00, 1.00) backwards;
}
@keyframes ae-fg {
0% { opacity: 0; }
30% { opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes ae-rg {
from { transform: rotate(0deg); }
to { transform: rotate(180deg); }
}
/* 背景层 */
.bvUkz {
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border-radius: 100px;
clip-path: inset(0 0 0 0 round 100px);
background: var(--XKMDxc);
transition: filter 1000ms cubic-bezier(0.00, 0.00, 0.00, 1.00),
background 400ms linear;
}
.Y5MKCd .bvUkz {
animation: ae-bf 2000ms linear backwards;
}
@keyframes ae-bf {
0% { background: var(--XKMDxc); }
30% { background: inherit; }
50% { background: inherit; }
100% { background: var(--XKMDxc); }
}
.plR5qb:not(.PHjFye):hover .bvUkz {
background: inherit;
filter: blur(2px);
}
.plR5qb .bvUkz::after {
content: '';
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
border-radius: 100px;
position: absolute;
background: inherit;
opacity: .5;
}
/* 内容区域 */
.u4Uk3c {
align-items: center;
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
.PD3zdc {
display: inline-flex;
align-items: center;
}
.lTxWLe {
padding: 0 4px;
}
.z1asCe {
display: inline-block;
fill: currentColor;
height: 20px;
line-height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div class="demo-wrapper">
<button class="plR5qb Y5MKCd" type="button">
<div class="xL0qi">
<div class="iydNQb"></div>
</div>
<div class="mTurwe">
<div class="iydNQb"></div>
</div>
<div class="bvUkz"></div>
<div class="u4Uk3c">
<span class="PD3zdc z1asCe" style="height:20px;line-height:20px;width:20px">
<svg focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">
<g><rect fill="none" height="24" width="24"></rect></g>
<g><g>
<path d="M17.5 12c0-3.04 2.46-5.5 5.5-5.5-3.04 0-5.5-2.46-5.5-5.5 0 3.04-2.46 5.5-5.5 5.5 3.04 0 5.5 2.46 5.5 5.5z"></path>
<path d="M15.65 11.58c.18-.5.27-1.03.31-1.58h-2c-.1 1.03-.51 1.93-1.27 2.69-.88.87-1.94 1.31-3.19 1.31C7.03 14 5 12.07 5 9.5 5 7.03 6.93 5 9.5 5c.46 0 .89.08 1.3.2l1.56-1.56C11.5 3.22 10.55 3 9.5 3 5.85 3 3 5.85 3 9.5S5.85 16 9.5 16c.56 0 2.26-.06 3.8-1.3l6.3 6.3 1.4-1.4-6.3-6.3c.4-.5.72-1.08.95-1.72z"></path>
</g></g>
</svg>
</span>
<span class="lTxWLe">AI 模式</span>
</div>
</button>
</div>
<script>
(function() {
// 动态旋转光环角度，实现弧形光带沿按钮边缘移动
const outerRing = document.querySelector('.xL0qi .iydNQb');
const innerRing = document.querySelector('.mTurwe .iydNQb');
if (!outerRing || !innerRing) return;
let angle = 0;
function animateRotation() {
angle = (angle + 0.3) % 360;
const rotateValue = `rotate(${angle}deg)`;
outerRing.style.transform = rotateValue;
innerRing.style.transform = rotateValue;
requestAnimationFrame(animateRotation);
}
animateRotation();
// 一次性加载动画结束后移除 Y5MKCd 类，避免重复播放
const button = document.querySelector('.plR5qb');
if (button && button.classList.contains('Y5MKCd')) {
setTimeout(() => {
button.classList.remove('Y5MKCd');
}, 2000);
}
})();
</script>
</body>
</html>
浙公网安备 33010602011771号