赵忠林
368e027426
- 所有主题的 avue-logo 背景改为白色，并添加 0 2px 8px rgba(0,0,0,0.06) 阴影效果 - 各主题顶部栏背景及文字颜色调整，提升整体对比度与视觉统一性 - 统一调整下拉菜单、面包屑、图标等元素颜色为 rgba(0,0,0,0.85) 或 0.65，增强易读性 - 修正部分输入框和色彩选择器的边框及背景颜色，增强一致性 - index.html 添加 favicon.ico 作为页面图标 - 新增图标悬停显示浅灰圆形背景效果示例页面 icon-hover-demo.html - icon-hover-demo.html 包含核心 CSS 代码和 Element Plus 的示例用法，方便复用和参考
143 lines
3.7 KiB
HTML
143 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>图标悬停圆形背景效果</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: #f5f7fa;
|
|
padding: 40px;
|
|
color: #333;
|
|
}
|
|
h1 { font-size: 18px; margin: 0 0 24px; }
|
|
h2 { font-size: 14px; margin: 32px 0 12px; color: #666; }
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
max-width: 600px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
/* 核心样式：图标按钮悬停圆形背景 */
|
|
.icon-hover-btn {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: #333;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.icon-hover-btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: #f2f3f5;
|
|
transform: scale(0.6);
|
|
opacity: 0;
|
|
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
|
|
}
|
|
.icon-hover-btn:hover::before,
|
|
.icon-hover-btn:focus-visible::before {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
.icon-hover-btn svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 22px;
|
|
height: 22px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.code-block {
|
|
background: #f8f9fa;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
overflow-x: auto;
|
|
white-space: pre;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>图标悬停圆形背景效果</h1>
|
|
<div class="card">
|
|
<p>把鼠标移到下面的 T 恤图标上，就会出现类似“铃铛”示例的浅灰圆形背景。</p>
|
|
|
|
<div class="row">
|
|
<button class="icon-hover-btn" aria-label="T恤">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M7 3l3 3h4l3-3 4 4-3 2v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9L3 7l4-4z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<span style="color:#999;font-size:13px;">↑ hover 查看效果</span>
|
|
</div>
|
|
|
|
<h2>CSS 核心代码（可复制）</h2>
|
|
<pre class="code-block">.icon-hover-btn {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: #333;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.icon-hover-btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: #f2f3f5;
|
|
transform: scale(0.6);
|
|
opacity: 0;
|
|
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
opacity 0.2s ease;
|
|
}
|
|
.icon-hover-btn:hover::before,
|
|
.icon-hover-btn:focus-visible::before {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
.icon-hover-btn svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 22px;
|
|
height: 22px;
|
|
}</pre>
|
|
|
|
<h2>Element Plus 用法示例</h2>
|
|
<pre class="code-block"><el-button class="icon-hover-btn" link>
|
|
<el-icon size="22"><Upload /></el-icon>
|
|
</el-button></pre>
|
|
</div>
|
|
</body>
|
|
</html>
|