解决方法
实现类似效果的另一种方法是使用线性渐变作为背景图像,将图像定位在元素的中心,然后在悬停时将背景大小从0％100％转换为100％100％.将X轴中的背景尺寸从0％增加到100％意味着背景颜色将慢慢填满元素并保持其位置固定在中心意味着颜色将从中心到左边缘和右边缘增长同时.
与web-tiki提供的答案相比,Gradients的支持度低于变换,这是一个缺点,但这种方法不需要任何额外的伪元素,这意味着它们可以用于其他目的.
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>
