Before, at least 5 people asked me in the comments how the wavy underline animation is implemented when linking hover in the article, similar to the gif below:
Here is how to achieve it.
There are two implementation methods, each with its advantages and disadvantages.
1. Use pure CSS to achieve radial gradient
It is to draw our wavy line effect using a radial gradient. A wavy line loop segment is a combination of a half arc facing upwards and a half arc facing downwards.
Therefore, we only need to draw arcs using radial gradients, and then by background-positioncontrolling the position of the two arcs, so that they can be spliced together before and after to achieve the wave line effect.
The relevant CSS code is as follows:
.flow-wave {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}
The real-time effects are as follows:
With the static wavy line effect, the rest is like this wavy line moving, and you can use CSS3 animationanimation to control the background-positionposition.
.flow-wave {
animation: waveFlow 1s infinite linear;
}
@keyframes waveFlow {
from { background-position-x: -10px, 0; }
to { background-position-x: -30px, -20px; }
}
So the wave line animation effect is realized.
You can click here: CSS radial gradient simulation wave line demo
The advantage of this method is that the color control is very convenient. For example, we change the text color to forgive green, and the color of the curved water wave also becomes forgive green:
The disadvantage of this method is that the cost of understanding is a bit high. How to use CSS to radial-gradientsimulate the wave line effect requires considerable CSS skill accumulation. It is not easy to get started, and it is not easy to maintain if you need to modify a size in the future. At the same time, on the Chrome browser with a normal screen density screen, the lines are not smooth, which may not be acceptable to faulty designers.
At this point, you can try the following method that is more conducive to understanding.
2. Use SVG waveform vector diagram as background
That is, we directly use a SVG waveform vector diagram as the background, instead of manually drawing CSS by ourselves, the amount of code is similar, and it is easier to understand. CSS code hint:
.svg-wave {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
background-size: 20px auto;
}
The real-time effects are as follows:
With the static wavy line effect, the rest is like this wavy line moving, and you can use CSS3 animationanimation to control the background-positionposition.
.svg-wave {
animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
from { background-position: 0 100%; }
to { background-position: -20px 100%; }
}
This method is the method used by my blog link.
The advantage is that the edges of the lines are smooth, the effect is delicate, easy to understand, easy to use, and easy to maintain.
The disadvantage is also obvious, that is, the color of the wavy line cannot change in real time with the color of the text, which is suitable for scenes where the color of the text does not change.
If we want to change the color of the wavy line is also very simple, modify this part of the backgroundcode stroke='%23333', '%23'that is #, so it stroke='%23333'actually stroke='#333'means. For example, we need to change it to red and slightly orange, stroke='%23F30'and it can be written completely stroke='%23FF3300'.
This color is the color of the wavy line of my blog link, as shown below:
You can choose the appropriate method according to your actual development scenario.
3. Whenever it is about to end
text-decorationProperties already support tilde underline:
text-decoration-style: wavy;
The effect is as follows:
It can be seen that the line is so thick and inconsistent, and when the characters and the decorative line overlap, the decorative line disappears directly, and the wavy line becomes a section, which requires text-decoration-skipadditional control. Therefore, for actual development, it is not recommended to use it in actual projects.
Update on 2020-03-21
text-decorationIt is also possible to implement wavy lines that can be used in actual projects by properties. You can refer to this article of mine: " CSS text-decoration achieves a 100% wavy line effect ".
Because the width of the wavy line is different under different browsers, we cannot predict the width of each repeated segment of the wavy line, and it is not feasible in theory to want infinite motion.
Therefore, the wave line animation effect of text or graphics cannot be used text-decoration.
PS: Text-decoration adds not only wavy lines, but also dotted lines, etc. If you are interested, please refer to the article I wrote earlier on " Understanding new features such as CSS3 text-decoration wavy lines ".
Finally, write a poem:
Whenever it is about to end,
I always want to talk about something.
Where does the addiction come from?
There is an island in the distance.