在悬停时从中心填充元素

Question

如何创建按钮,以便在悬停时背景颜色从元素的中心向左和向右填充元素.

示例:

我知道如何使用CSS3 transitions并可以使其动画到所需的形状,但不能让它从中心向外过渡.

形状不会改变尺寸我只想用它来填充它transition.

Answer 1

以达到类似的效果的另一种方法是使用linear-gradient为background-image,在元件的中心处的图像的位置和然后过渡background-size从0% 100%到100% 100%悬停.递增 background-size在X轴0%,以100%将意味着,背景颜色会慢慢填满元素和保持其固定在中心位置将意味着颜色会从中心在同一时间增长到左右边缘.

与web-tiki提供的答案相比,梯度具有比变换更低的支持,这是一个缺点,但是这种方法不需要任何额外的伪元素,这意味着它们可以用于其他目的.

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;
  -webkit-transition: color .5s;
          transition: color .5s;
}
div:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #B17461;
  z-index: -1;
  -webkit-transform:scaleX(0);
      -ms-transform:scaleX(0);
          transform:scaleX(0);
  -webkit-transition: -webkit-transform .5s;
          transition:         transform .5s;
}
div:hover {
  color: #fff;
}
div:hover:before {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          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 像素并将其固定在中心，然后仅对宽度进行动画处理即可获得所需的结果。