怎样制作css幽灵按钮的背景填充过渡_通过background-size百分比变化

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《怎样制作css幽灵按钮的背景填充过渡_通过background-size百分比变化》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

幽灵按钮背景填充过渡不能直接用 background-color 动画，因其初始 transparent 与目标色无法线性插值；需用 linear-gradient 配合 background-size 百分比缩放（0%→100%），并固定 background-position 和设置 background-origin: border-box 确保动画精准。

幽灵按钮背景填充过渡为什么不能直接用 background-color 动画

因为幽灵按钮（transparent border + solid text）本身没有背景色，靠 background-image 或渐变模拟“填充感”。直接对 background-color 做 transition 会失效——初始值是 transparent，目标值比如 #007bff，但浏览器无法在透明和颜色之间做线性插值动画，实际表现为突变或无反应。

真正可行的路径是：用线性渐变作背景，再通过控制 background-size 的百分比缩放，让渐变“从无到有”地展开。

background-size 百分比过渡的关键写法

核心在于把渐变定义为横向铺满（to right），初始 background-size: 0% 100%（宽度 0%，高度 100%），hover 时变为 100% 100%。这样渐变就像一张可拉伸的贴纸，从左往右“铺开”。

必须同时设置：background-position 固定起始点（如 left center），否则尺寸变化时渐变会滑动；还要用 background-origin: border-box 确保计算基准一致。

• background-image: linear-gradient(to right, #007bff, #007bff) —— 单色渐变，避免色差干扰
• background-size: 0% 100% —— 初始不可见
• background-position: left center —— 锚定左侧起点
• background-repeat: no-repeat
• transition: background-size 0.3s ease

常见翻车点：border 和 padding 对 background-size 的影响

background-size 百分比默认相对于 background-origin 区域计算。如果没显式设 background-origin，且按钮有 border，不同浏览器可能以 padding-box 或 border-box 为基准，导致动画错位或不触发。

真实场景中，幽灵按钮常带 border: 2px solid #007bff，此时务必加：background-origin: border-box，否则 0% 100% 可能被解释成“0% 宽度 = 0px”，而不是“0% of total width including border”。

另外，padding 会影响内容区域大小，但只要 background-origin 和 background-position 配合得当，不影响动画逻辑。

完整可粘贴代码片段（含 hover 恢复逻辑）

.ghost-btn {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid #007bff;
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  overflow: hidden;
<p>/<em> 渐变背景 </em>/
background-image: linear-gradient(to right, #007bff, #007bff);
background-size: 0% 100%;
background-position: left center;
background-repeat: no-repeat;
background-origin: border-box;</p><p>transition: background-size 0.3s ease, color 0.3s ease;
}</p><p>.ghost-btn:hover {
color: white;
background-size: 100% 100%;
}</p><p>/<em> 确保文字不被裁切 </em>/
.ghost-btn::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
}</p>

注意：::before 不是必须的，但加上能防止某些旧版 Safari 在快速悬停时出现渲染残留。真正关键的是 background-origin 和 background-position 的组合——漏掉任意一个，动画就容易卡在 50% 或偏移出界。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~