悬停时从中心填充元素

Question

我如何创建一个按钮，以便 悬停时背景颜色从元素的中心 到元素的左侧和右侧填充元素。

例子：

我知道如何使用 CSS3

transitions

并且可以让它动画到所需的形状但不能让它从中心向外过渡。

形状不会改变大小我只想用

transition

填充它。

Answer 1

另一种实现类似效果的方法是使用

linear-gradient

作为

background-image

，将图像定位在元素的中心，然后在悬停时将

background-size

从

0% 100%

过渡到

100% 100%

。将 X 轴上的

background-size

从

0%

增加到

100%

意味着背景颜色将慢慢填充元素并保持其位置固定在中心将意味着颜色将从中心向左边缘和右边缘增长同时。

Gradients 的支持比 transforms 低，与 web-tiki's 提供的答案相比，这是一个缺点，但这种方法不需要任何额外的伪元素，这意味着它们可以用于其他目的。

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#B17461, #B17461);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s, color .5s;
}
div:hover {
  background-size: 100% 100%;
  color: #fff;
}

<div>NEXT</div>

---

根据渐变图像的位置，可以使用完全相同的方法来生成各种不同的填充方法。

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#B17461, #B17461);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
  background-position: 50% 50%;
}
.to-left {
  background-position: 100% 50%;
}
.to-right {
  background-position: 0% 50%;
}
.to-top {
  background-position: 50% 100%;
}
.to-bottom {
  background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
  background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
  background-size: 100% 0%;
}
.center-corner {
  background-size: 0% 0%;
}
div:hover {
  background-size: 100% 100%;
  color: #fff;
}

<h4>From center towards left and right</h4>
<div class='center-right-left'>NEXT</div>
<h4>From center towards top and bottom</h4>
<div class='center-top-bottom'>NEXT</div>
<h4>From center towards corners</h4>
<div class='center-corner'>NEXT</div>
<h4>From right to left</h4>
<div class='to-left'>NEXT</div>
<h4>From left to right</h4>
<div class='to-right'>NEXT</div>
<h4>From bottom to top</h4>
<div class='to-top'>NEXT</div>
<h4>From top to bottom</h4>
<div class='to-bottom'>NEXT</div>

Answer 2

要在悬停时从中心用纯色填充元素，您可以使用伪元素和 CSS3 过渡。
在下面的例子中，背景是用一个伪元素制作的，并在悬停时从 0 水平缩放到 1：

div {
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #B17461;
  color: #B17461;
  font-size: 30px;
  font-family: arial;
  transition: color .5s;
}
div:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #B17461;
  z-index: -1;
  transform:scaleX(0);
  transition: transform .5s;
}
div:hover {
  color: #fff;
}
div:hover:before {
  transform: scaleX(1);
}

<div>NEXT</div>

Answer 3

你可以用这个结构做一个按钮

<button> 
<text layer>
<image layer>
</button>



on.hover -> button > image
transform-origin: center
insert desired effect here

*编辑——看起来你想要文本在过渡发生时有颜色变化..

你可以在 div 中做一个 2 图像按钮 悬停时隐藏白色背景图像并显示包含棕色图像的 div

<div container>
<img borwn butn>
</div>

设置容器的宽度为0像素并固定在中心 然后仅对宽度进行动画处理将为您提供所需的结果。