1. Linear-gradient Foundation:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: green; /* basic usage */ background-image: linear-gradient(red, yellow, green, blue); Background-image: linear gradient(rgba(255,0,0,.2), yellow, green, blue); /* Control the direction of color gradient to right from left to right to left from right to left to buttom from top to bottom to top */ background-image: Linear-gradient (to right, red, yellow, green, blue); /* 0deg = to top -- from bottom to top */ background-image: linear-gradient(0deg, red, yellow, green, blue); /* Rotate 45deg clockwise based on 0 degrees */ background-image: Linear-gradient (45deg, red, yellow, green, blue); /* Background-image: linear gradient(-45deg, red, yellow, green, blue); /* Background-image: linear gradient(-45deg, red, yellow, green, blue); /* Set the starting position of the transition color */ /* Create a gradient effect between red and yellow from the beginning of the transition position 50px */ background-image: linear-gradient(to right,red 50px, yellow, green, blue); background-image: linear-gradient(to right,red 50px, yellow 50px, green, blue); background-image: linear-gradient(to right,red 50px, yellow 50px, yellow 100px, green, blue); } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

Supplement:

Background – the image and background image:

When multiple linear gradients appear at the same time, the effect is always overwritten by the last one.

Background and background image:

Background is not affected by background-color;

Background-color with background-image blog.csdn.net/qq_44744279…

2. Repeat linear gradient: repeating-Linear-gradient

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: orange; background-image: linear-gradient(to right, red 0, red 50px, yellow 50px , yellow 100px , red 100px, red 150px, yellow 150px ,yellow 200px); /* With the same gradient */ background-image: repeating-Linear-gradient (to right, Red 0, red 50px,yellow 50px,yellow 100px); } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

3. Notepad effect

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 500px; background-color: orange; border: 1px solid; background-image: repeating-linear-gradient(#FFF 0, #FFF 50px,#999 50px ,#999 51px); } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

Supplement:

Border: 1 px solid; Solid — Type of border line (solid line)

4. Stacking effects

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 800px; height: 500px; border: 1px solid lightsalmon; background-image: Repeating-linear-gradient (rgba(0,128,0,.3) 0, rgba(0,128,0,.3) 20px, Rgba (255,128,0,.3) 20px,rgba(255,128,0,.3) 40px,repeating-linear-gradient(to right, rgba(0,128,0,.3) 0, Rgba (0,128,0,.3) 20px,rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px); background-image: Repeating-linear-gradient (45DEg, Rgba (0,128,0,.3) 0, rgba(0,128,0,.3) 20px, Rgba (255,128,0,.3) 20px,rgba(255,128,0,.3) 40px,repeating-linear-gradient(-45deg, rgba(0,128,0,.3) 0, Rgba (0,128,0,.3) 20px,rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px); } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

5. Progress bar effect

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title>Document</title> <style> 500px; height: 50px; background-image: repeating-linear-gradient(-45deg, hotpink 0, hotpink 10px, white 10px, white 20px); /* The size of the gradient image should exceed the width of the container to achieve visual movement */ background-size: 800px 50px; } .box:hover{ background-position: -300px 0; /* Transition: 8s; } /* effect 2 */. Box {width: 500px; height: 50px; background-image: repeating-linear-gradient(-45deg, hotpink 0, hotpink 10px, white 10px, white 20px); } .box:hover{ width: 1000px; transition: 5s; } </style> </head> <body> <div class="box"></div> </body> </html>Copy the code

Supplement:

The Transition property is a shorthand property that sets four transition properties:

  • Transition-property ———- Specifies the name of the CSS property to set the transition effect
  • Transition-duration ———– specifies how many seconds or milliseconds it takes to complete the transition effect
  • Transition-timing -function- Specifies the speed curve for the speed effect
  • Transition-delay ————– defines when the transition effect starts

Default value: all 0 Ease 0

Note: Always set the transition-duration property, otherwise a duration of 0 will not have a transition effect.