CSS3でホバー時にLI要素の背景色を左から右に塗りつぶす方法は?

CSS で背景色を左から右に塗りつぶす

Q: li 要素の背景色が左から右に塗りつぶされる効果を作成しようとしています。ホバーします。 CSS3 を使用してこれを実現するにはどうすればよいですか?

A: 要素の背景として線形グラデーションを使用し、その位置をアニメーション化します。コードは次のとおりです:

<code class="css">/* Set up the background gradient (red to blue) */
background: linear-gradient(to left, red 50%, blue 50%) right;

/* Make the background twice the size of the element */
background-size: 200% 100%;

/* Position the background to the right */
background-position: right;</code>

カーソルを置くと、背景の位置が左に変更されて要素が埋められます。スムーズなトランジションを追加するには、transition: all 2s easy; を使用します。

<code class="css">/* On hover, change the background position to the left */
background-position: left;</code>

デモ:

<code class="html"><li>Hover me to fill the background</li></code>

<code class="css">li {
  display: inline-block;
  padding: 1em;
  background: linear-gradient(to left, red 50%, blue 50%) right;
  background-size: 200% 100%;
  background-position: right;
  transition: all 2s ease;
}

li:hover {
  background-position: left;
}</code>

以上がCSS3でホバー時にLI要素の背景色を左から右に塗りつぶす方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。