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

问题描述

如何创建一个按钮，这样的上徘徊的背景色填充从元件的中心以左，右的元素。

例如：

我知道如何使用CSS3 转换键，可以得到它的动画所需的形状，但不能让它从中心向外过渡。

形状不会改变大小，我只是想用过渡来填补它。

解决方案

要填写的元素从悬停中心纯色，您可以使用一个伪元素和CSS3过渡。结果
在下面的例子中，背景是由与伪元件和从0到1 horizo​​ntaly缩放悬停

\r

\r

DIV {\r
  位置：相对;\r
  显示：inline-block的;\r
  填充：15px的70像素;\r
  边框：5像素固体＃B17461;\r
  颜色：＃B17461;\r
  字体大小：30像素;\r
  FONT-FAMILY：宋体;\r
  -webkit-过渡：色.5s;\r
          过渡：颜色.5s;\r
}\r
DIV：前{\r
  内容：'';\r
  位置：绝对的;\r
  顶部：0;左：0;\r
  宽度：100％;高度：100％;\r
  背景：＃B17461;\r
  的z-index：-1;\r
  -webkit-变换：将scaleX（0）;\r
      -ms变换：将scaleX（0）;\r
          变换：将scaleX（0）;\r
  -webkit-过渡：-webkit-变换.5s;\r
          过渡：变换.5s;\r
}\r
DIV：悬停{\r
  颜色：#FFF;\r
}\r
DIV：悬停：前{\r
  -webkit-变换：将scaleX（1）;\r
      -ms变换：将scaleX（1）;\r
          变换：将scaleX（1）;\r
}

\r

＆LT; D​​IV＆gt;接下来＆LT; / DIV＆GT;

\r

\r

\r

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.

解决方案

To fill an element with a solid color from center on hover, you can use a pseudo element and CSS3 transitions.
In the following example, the background is made with a pseudo element and scaled from 0 to 1 horizontaly on hover:

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>

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