CSS は、ホバー時にテキスト展開の色変更効果を実装します

ラベルがホバーしたときに色が変わる効果は、全員が書く必要があります。

ただし、ホバリング時に左から右に色を変更する効果が必要な場合:

そのアイデアはより独創的であるため、書くことができるそのような効果はあまりありません。

一緒に書きましょう。

<!DOCTYPE html>
<html lang="en">
<body>  
  <a href="#"><span>Hello Guang</span>Hello Guang</a>
</body>
</html>
复制代码

明らかに、左から右へのシフトを行うには別の要素が必要なので、span タグを追加します。

次に、スタイルを記述します。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}
复制代码

ボディパーツはフレックスセンターを設定し、ビューポート全体の高さである 100 vh の最小の高さを指定します。

次に、 a タグのスタイルを設定します。

a {
  display: inline-block;
  font-size: 16px;
  color: orange;
  background: red;
  font-weight: 800;
  text-decoration: underline;
}
复制代码

デバッグの便宜上、赤い背景を追加します。

次のようになります。

絶対にページの中央に配置します。

次に、スパンをスタイルします。

a {
  position: relative;
}

a span {
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  overflow: hidden;
}
复制代码

スパンは、タグのテキストと一致する青色の背景に設定されます。

次に、逆に翻訳します。

a span {
    transform: translateX(-100%);
}
复制代码

ホバリングすると、逆に翻訳されます。

a {
    transform: translateX(-100%);
    transition: transform 300ms ease;
}
a:hover span {
    transform: translateX(0);
} 
复制代码

トランジション 300ms トランジション効果を追加します。

次のようになります。

overflow:hidden を a に追加して、最初の効果を実現します。

次のように、背景色を削除し、スパンテキストを青に設定し、下線を追加します。

現在のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<body>  
  <a href="#"><span>Hello Guang</span>Hello Guang</a>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: 100vh;
    }

    a {
      position: relative;
      display: inline-block;
      font-size: 32px;
      color: orange;
      font-weight: 800;
      text-decoration: underline;
      overflow: hidden;
    }

    a span {
        position: absolute;
        top: 0;
        left: 0;
        color: blue;
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 300ms ease;
        text-decoration: underline;
    }
    
    a:hover span {
      transform: translateX(0);
    } 
    </style>
</body>
</html>
复制代码

しかし、これと私たちが望む効果との間にはまだギャップがあり、2 つのテキストは重なっていません。

スパンを移動するときに、両側のテキストが完全に重なるようにするにはどうすればよいですか?

これには、スパンが右に移動し、テキストが左に移動して、この段階的な展開効果を実現する 2 つの移動が必要です。

それでおしまい：

a span {
  position: absolute;
  top: 0;
  left: 0;
  background: green;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 300ms ease;
}
a span::before {
  display: inline-block;
  content: 'Hello Guang';
  color: blue;
  transform: translateX(100%);
  transition: transform 300ms ease;
  text-decoration: underline;
}
a:hover span {
  transform: translateX(0);
}
a:hover span::before {
  transform: translateX(0);
}
复制代码

疑似要素の前にスパンを追加し、スパンの translateX(-100%) を左に移動し、次に疑似要素の前に translateX(100%) を移動して、タグのテキストと一致するようにします。

次に、ホバリング時に translateX(0) に移動します。つまり、1 つが左に移動し、もう 1 つが右に移動します。

このようにして、私たちは望ましい効果を達成しました！

次に、overflow:hidden を追加して背景を削除します。

同時に、before 疑似要素は、直接書き込むのではなく、 data- 属性からコンテンツを取得できます。

<a href="#"><span data-content="Hello Guang"></span>Hello Guang</a>

a span::before {
  display: inline-block;
  content: attr(data-content);
}
复制代码

完全なコードは次のとおりです。

<!DOCTYPE html>
<html>
<body>
    <a href="#"><span data-content="Hello Guang"></span>Hello Guang</a>
    <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: 100vh;
    }

    a {
      position: relative;
      display: inline-block;
      font-size: 32px;
      color: orange;
      font-weight: 800;
      text-decoration: underline;
      overflow: hidden;
    }
    a span {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      transform: translateX(-100%);
      transition: transform 300ms ease;
    }
    a span::before {
      display: inline-block;
      content: attr(data-content);
      color: blue;
      transform: translateX(100%);
      transition: transform 300ms ease;
      text-decoration: underline;
    }
    a:hover span {
      transform: translateX(0);
    }
    a:hover span::before {
      transform: translateX(0);
    }
    </style>
</body>
</html>
复制代码

要約する

ホバリング時のテキストの拡大と色の変化の効果を実現しました。

コンテナーは右に移動し、コンテンツは左に移動します。これは、段階的な拡張の効果です。

元のテキストのオーバーラップは、左から右に色を変更する効果です。

有没有感觉思路很巧妙呢？

CSS は、ホバー時にテキスト展開の色変更効果を実装します

要約する

おすすめ