Add wavy line effect to text

This time to bring you to the text with the wavy line effect, to the text with a wavy line effect of attention to what matters, the following is the actual case, together to see.

Objective

The clever design of CSS, the realization of the delicate, thin ruminate, its wonderful, marvelous. This wave line, trickery the use of the Linear-gradient attribute, the combination of angle, color, position in one, with Background-size,background-repeat, a lot of, smooth transition. Wow, this last effect is too clever for seconds! There is no word on earth to describe ...

--preface, adapted from the "Food God"

Implementation method

Syntax: linear-gradient (Direction, Color-stop 1, color-stop 2,...... ）

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

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

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

Add a colorlinear-gradient (45deg, red, transparent 45%,red)
Do not know you see here, there is no such as see a mirror, Epiphany.

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

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

Combine these two lines.

Combine

See here, do you know how to reach the wave line effect? ^_^

The height of the original 1/2

Final code:

Text wavy Line Effect

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Summary of common color gradient methods

Simulation of the Ferris wheel rotation animation effect

CSS3 's Box-sizing Property graphic tutorial