CSS implements text expansion color change effect when hover

a The effect of changing color when the label hovers must be written by everyone:

But if you want the effect of changing color from left to right when hovering:

There are not many such effects that can be written, because its ideas are more ingenious.

Let's write it together.

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

Obviously, we need another element to do a left-to-right shift, so we add a span tag.

Then write the style:

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

The body part sets a flex center, and specifies a minimum height of 100 vh, which is the height of the entire viewport.

Then style the a tag:

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

For debugging convenience, we add a red background.

Now it looks like this:

Absolutely centered on the page.

Then style the span:

a {
  position: relative;
}

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

The span is set to a blue background, which coincides with the text of the a tag.

Then translate back:

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

When hovering, translate back:

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

Add a transition 300ms transition effect.

Now it looks like this:

Add overflow:hidden to a to achieve the initial effect:

Remove the background color, set the span text to blue and add an underline, like this:

The current code is as follows:

<!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>
复制代码

But there is still a gap between this and the effect we want, and the two texts do not overlap.

How can the text on both sides completely overlap when moving the span?

This requires two movements, the span moves to the right, and the text moves to the left to achieve this gradual unfolding effect.

That's it:

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);
}
复制代码

Add a before pseudo-element to the span, span translateX(-100%) moves to the left, and then translateX(100%) before the pseudo-element, just moves back to coincide with the text of the a tag.

Then move to translateX(0) when hovering, that is, one moves to the left and the other moves to the right.

In this way, we have achieved the desired effect!

Then add overflow:hidden and remove the background:

At the same time, where can the before pseudo-element get the content from the data- attribute instead of writing it directly:

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

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

The complete code is as follows:

<!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>
复制代码

Summarize

We have achieved the effect of text expansion and color change when hovering.

It requires two movements, the container moves to the right, and the content moves to the left, which is an effect of gradual expansion.

Overlapping the original text is the effect of changing color from left to right.

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

CSS implements text expansion color change effect when hover

Summarize

Guess you like