Use CSS to implement image special effects code

The image above is the source image. Take the following image as an example.
For example Code Is:

You can modify the image effects according to the following code.

1. Transparent Effect

Code:

Note:
Opacity: transparency at the beginning (0-100); finishopacity: transparency at the end (0-100 ); style = 0 average transparent, = 1 linear transparent, = 2 circular transparent, = 3 diamond transparent.

2. left/right flip Effect

Code:

3. up/down flip Effect

Code:

4. Gray tuning effect

Code:

5. X-ray Effect

Code:

6. Color swap Effect

Code:

7. Luminous border effect

Code:

Note:
Color = # code of 4a7ac9 luminous color; strength = 10 luminous intensity; width: 148px filter width = Image Width + luminous intensity X2 (128 + 10x2 = 148); height: 158px filter Height = image height + luminous intensity X2 + 10 (128 + 10x2 + 10 = 158)

8. Projection Effect

Code:

Note:
Color = #4a7ac9 Projection Color Code; Direction = 135 Projection Direction 135 degrees (only a multiple of 45 degrees; for example, 45, 90, 135,180,225,270,315 degrees); width: 153px filter width = Image Width + 25 (128 + 25 = 153); Height: 168px filter Height = image height + 40 (128 + 40 = 168)

9. Shadow Effect

Code:

Note:
Color = #4a7ac9 shadow color code; offx = 8 horizontal displacement 8; offy vertical displacement 8 (displacement can be positive or negative); width: 143px filter width = Image Width + absolute horizontal displacement value + 10 (128 + 8 + 10 = 146); height: 156px filter Height = height of the image + absolute vertical displacement value + 20 (128 + 8 + 20 = 156)
10. blur effect

Code:

Note:
Direction = 45 blur a direction of 45 degrees (only a multiple of 45 degrees; for example, 45, 90, 135,180,225,270,315 degrees); width: 143px filter width = Image Width + 15 (128 + 15 = 143); Height: 158px filter Height = image height + 30 (128 + 30 = 158)
11. waveform Effect

Code:

Note:
Freq = 2 frequency (> 0); strength = 9 amplitude intensity (> 0); lightstrength = 5 peak intensity (0 ~ 100); Phase start phase (0 ~ 100); width: 146px filter width = Image Width + amplitude intensity X2 (128 + 9x2 = 146); height: 156px filter Height = image height + amplitude intensity X2 + 10 (128 + 9x2 + 10 = 156)