悬停时从中心填充元素 [英] Fill element from center on hover

问题描述

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

示例:

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

形状不会改变大小我只想使用 transition 填充它.

解决方案

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

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

div {位置:相对；显示:内联块；填充:15px 70px；边框:5px 实心 #B17461;颜色:#B17461；字体大小:30px；字体系列:arial；背景图像:线性渐变(#B17461，#B17461)；背景位置:50% 50%；背景重复:不重复；背景尺寸:0% 100%；过渡:背景大小 0.5 秒，颜色 0.5 秒；}div:悬停{背景尺寸:100% 100%；颜色:#fff;}

NEXT

<小时>

完全相同的方法可用于根据渐变图像的位置生成各种不同的填充方法.

div {位置:相对；显示:内联块；填充:15px 70px；边框:5px 实心 #B17461;颜色:#B17461；字体大小:30px；字体系列:arial；背景图像:线性渐变(#B17461，#B17461)；背景重复:不重复；过渡:背景大小 0.5 秒，颜色 0.5 秒；}.center-right-left, .center-top-bottom, .center-corner {背景位置:50% 50%；}.向左 {背景位置:100% 50%；}.向右{背景位置:0% 50%；}.到达顶点 {背景位置:50% 100%；}.到底部{背景位置:50% 0%；}.center-right-left, .to-left, .to-right {背景尺寸:0% 100%；}.center-top-bottom, .to-top, .to-bottom {背景尺寸:100% 0%；}.中心角{背景尺寸:0% 0%；}div:悬停{背景尺寸:100% 100%；颜色:#fff;}

<h4>从中心向左右</h4><div class='center-right-left'>NEXT</div><h4>从中心到顶部和底部</h4><div class='center-top-bottom'>NEXT</div><h4>从中心到角落</h4><div class='center-corner'>NEXT</div><h4>从右到左</h4><div class='to-left'>NEXT</div><h4>从左到右</h4><div class='to-right'>NEXT</div><h4>从下到上</h4><div class='to-top'>NEXT</div><h4>从上到下</h4><div class='to-bottom'>NEXT</div>

How can I create a button so that on hover the background colour fills the element from center to left and right of the element.

Example :

I know how to use CSS3 transitions and can get it to animate to the desired shape but can't get it to transition from center outwards.

The shape does not change size I just want to fill it using a transition.

解决方案

Another way to achieve a similar effect would be to use linear-gradient as the background-image, position the image at the center of the element and then transition background-size from 0% 100% to 100% 100% on hover. Incrementing background-size in X axis from 0% to 100% would mean that the background color will slowly fill up the element and keeping its position fixed at the center would mean that the color would grow from center to the left and right edges at the same time.

Gradients have lower support than transforms and that is one drawback compared to the answer that has been provided by web-tiki's but this approach does not require any extra pseudo-elements which mean that they can be used for other purposes.

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>

---

The very same approach can be used for producing a variety of different fill approaches depending on the position of the gradient image.

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>

这篇关于悬停时从中心填充元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！