CSS3 achieves text wavy line effect

Preface

The css design is ingenious and the implementation is exquisite. If you think about it carefully, it is extraordinary and wonderful. This wavy line cleverly uses the linear-gradient attribute to integrate angle, color, and position. Together with background-size and background-repeat, it turns one into many and makes a smooth transition. Wow, the final effect is so clever! There are no words to describe it...

Implementation method

Syntax: linear-gradient(direction, color-stop 1 , color-stop 2,...)

Simple usage: background-image: linear-gradient(red, transparent);

Add angle, linear-gradient(45deg, red, transparent)

Add a position: linear-gradient(45deg, red, transparent 45%)

Add a colorlinear-gradient(45deg, red, transparent 45%,red)
I don’t know if everyone saw this, as if they saw a mirror and had an epiphany.

linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

linear-gradient(135deg , transparent 45%, red 55%, transparent 60%)

Combine these two lines.

Combined

Seeing this, do you know how to achieve the wavy line effect? ^_^

The height is 1/2 of the original

Final code:

Text wavy line effect

Summary

Okay, this is it. The above is the entire content of this article. I hope it will help everyone learn or use CSS3 It can be helpful. If you have any questions, you can leave a message to communicate.

For more articles related to CSS3 realizing text wavy line effect, please pay attention to the PHP Chinese website!