web-dev-qa-db-ja.com

ホバーの中心から要素を塗りつぶします

ホバーすると、背景色が要素の中央から要素の左右に塗りつぶされるようにボタンを作成するにはどうすればよいですか。

例：

Button filled by background color on hover

CSS3 transitionsの使用方法を知っていて、目的の形状にアニメーション化することはできますが、中心から外側に遷移させることはできません。

形状はサイズを変更しません。transitionを使用して塗りつぶしたいだけです。

cssbuttoncss-transitionscss-shapes
11
con322

同様の効果を実現する別の方法は、_linear-gradient_を_background-image_として使用し、画像を要素の中心に配置してから、_background-size_を_0% 100%_から_100% 100%_ホバーします。 X軸の_background-size_を_0%_から_100%_にインクリメントすると、背景色が要素をゆっくりと塗りつぶし、その位置を中央に固定したままにすると、色が中央から大きくなることを意味します。同時に左端と右端に。

グラデーションは変換よりもサポートが低く、これはweb-tiki'sによって提供された回答と比較して1つの欠点ですが、このアプローチでは追加の疑似要素は必要ありません。つまり、他の要素に使用できます。目的。

_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>_
29
Harry

要素を塗りつぶすホバーの中心から単色でするには、疑似要素と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>
12
web-tiki

この構造でボタンを実行できます

<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>

コンテナの幅を0pixに設定し、中央に固定してから、幅だけをアニメーション化すると、目的の結果が得られます。

0
vico