Detail on CSS3 gradient

Linear gradient

Grammar:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...) ;// Repeat the gradient
Copy the code

The first parameter:

Direction: Indicates the direction. This parameter is optional. The default value is from top to bottom

The second parameter:

Start-color: defines the start color stop-color: defines the end color

1. The first parameter

The default direction is from top to bottom when the first argument is null. Such as:

background-image: linear-gradient(#69f.#fd44ff);
Copy the code

The display effect is:

The key words of the direction are:

From the bottom to the right: from the bottom to the left: from the bottom to the left: from the bottom to the top A: From the upper right corner to the lower left corner

Such as:

background-image: radial-gradient(to right, #69f.#fd44ff);
background-image: radial-gradient(to top right, #69f.#fd44ff);
Copy the code

The code can also be written as:

background-image: radial-gradient(90deg.#69f.#fd44ff);
background-image: radial-gradient(45deg.#69f.#fd44ff);
Copy the code

The following information is displayed:

2. The second parameter

The second argument is color & position. There can be more than one color, and each color can write two positions. The position of each color corresponds to the starting transition color of that color. Such as:

background-image: linear-gradient(#69f 20%.#fd44ff);
background-image: linear-gradient(#69f 50%.#fd44ff);
background-image: linear-gradient(#69f 20%.#fd44ff 80%);
background-image: linear-gradient(#69f 50%.#fd44ff 50%);
Copy the code

The display effect is:

We can also configure multiple colors, and all colors have start and end values, for example:

background-image: linear-gradient(#69f 25%.#fd44ff 50%.#f64f59 75%.#fbd786);
background-image: linear-gradient(#69f 25%.#fd44ff 20% 50%.#f64f59 50% 75%.#fbd786 75%);
}
Copy the code

The above code shows the following effects:

Repeat the gradient

Repeat gradient is used to create repeated linear gradient “images”. With repeated gradients, we can achieve the loading effect:

.loading{
    margin: 100px;
    width: 400px;
    height: 20px;
    background: repeating-linear-gradient(45deg.#fff.20%.# 000 20% 40%);
    background-size: 20%;
    border: solid 1px # 000;
    animation: run 5s linear infinite both;
}
@keyframes run{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 100% 0; }}Copy the code

And repeated lines, like a chessboard.

.chess {
    width: 300px;
    height: 300px;
    background: #eac991;
    background-image: repeating-linear-gradient(transparent 0 19px.# 333 20px), repeating-linear-gradient(to right, transparent 0 19px.# 333 20px);
    border: solid 3px # 333;
    border-radius: 3px;
    position: relative;
    &:after{
        width: 15px;
        height: 15px;
        position: absolute;
        border-radius: 50%;
        background: # 000;
        content: ' ';
        left:92px;
        top: 92px;
        box-shadow: 0 22px 0 # 000.20px 22px 0 #fff.20px 41px 0 #fff, -20px 22px 0 #fff, -20px 41px 0 # 000.41px 41px 0 # 000}}Copy the code

Address: codepen. IO/jianxiujiuc…

Radial gradient

Grammar:

background-image: radial-gradient(shape size at position, start-color, ... , last-color);background-image: repeating-radial-gradient(shape size at position, start-color, ... , last-color);Copy the code

The first parameter:

Shape: Shape defines a shape (circle or ellipse), optional, default ellipse size: radius, optional Position: Defines the center position of the circle, optional, default is the center point of the shape

The second parameter:

Start-color: defines the start color stop-color: defines the end color

1. The first parameter

1.1 The first parameter can be ignored. If it is empty, it defaults to ellipse, the center of the circle is the center of the shape, and the radius is half of the diagonal of the shape. Such as:

 background-image: radial-gradient(#69f.#fd44ff);
Copy the code

The above code is equivalent to:

 background-image: radial-gradient(ellipse, #69f.#fd44ff);
Copy the code

Shape: if we want to set it to a circle, add the keyword cricle:

 background-image: radial-gradient(cricle, #69f.#fd44ff);
Copy the code

1.3 size: circular if you write one parameter, ellipse if you write two parameters (parameter values are different) :

background-image: radial-gradient(100px.#69f.#fd44ff);  // Circle with radius 100px
background-image: radial-gradient(200px 100px.#69f.#fd44ff);  // The major axis is 200px, the short axis is 100px
Copy the code

1.4 Position: center of the circle. The value of the position can be: At center, at top, at right, at bottom, at left, at top left, at top right, at bottom left, at bottom right.

Such as:

background-image: radial-gradient(at top, #69f.#fd44ff); // The center of the circle is in the middle of the top
background-image: radial-gradient(at top right, #69f.#fd44ff); // The center of the circle is in the upper right corner
Copy the code

As shown in the figure:

The center of the circle can also be a specific value, and the above code is equivalent to:

background-image: radial-gradient(at 150px 0.#69f.#fd44ff); 
background-image: radial-gradient(at 300px 0.#69f.#fd44ff); 
Copy the code

Closest side, closest corner, apsarp-side, apsarp-corner.

Closest -side Of the gradient center is the closest side to the container.

The end point is the farthest edge from the center of the apoapse-side gradient from the container. Closest -corner The closest Angle from the center of the gradient is used as the termination site. Apoapse-corner The farthest Angle from the center of the gradient is the termination position.

If it is empty, the default value is apis-corner.

Let’s take a look at the code and the effect of the gradient center ending with an edge from the container (container size is 200*200) :

  // The edge closest to the container from the center of the gradient is the end position, in this case 30px
  background-image: radial-gradient(closest-side circle at 30px 60px.#69f.#fd44ff);
  // The edge of the gradient center farthest from the container is the end position, in this case 200px-60px=140px
  background-image: radial-gradient(farthest-side circle at 30px 60px.#69f.#fd44ff);

Copy the code

Here’s an example:

The code and effect of the gradient center from the container with Angle as the end position (container size is 200*200) :

  SQRT (30*30+60*60)≈67px (Pythagorean theorem) SQRT (30*30+60*60)
  background-image: radial-gradient(closest-side circle at 30px 60px.#69f.#fd44ff);
  SQRT (30*30+60*60)≈220px
  background-image: radial-gradient(farthest-side circle at 30px 60px.#69f.#fd44ff);
Copy the code

2. The second parameter

The second argument, like a linear gradient, is color & position. There can be multiple colors, and each color can write two positions. Such as:

background-image: radial-gradient(#69f 25%.#fd44ff 50%.#f64f59 75%.#fbd786);
background-image: radial-gradient(#69f 25%.#fd44ff 20% 50%.#f64f59 50% 75%.#fbd786 75%);
Copy the code

The following information is displayed:

So come to the left and draw a rainbow with me.

.rainbow{
    width: 400px;
    height: 200px;
    background-image: radial-gradient(at center bottom, transparent 20%.#cc419c 20% 25%.#4d81ee 25% 30%.#03dbda 30% 35%.#81e745 35% 40%.#f6fc5e 40% 45%.#fea805 45% 50%.#fe6859 50% 55%, transparent 55%);
}
Copy the code

The effect is as follows:

Address: codepen. IO/jianxiujiuc…

3. Taper gradient

Grammar:

background-image: conic-gradient(from angle at position, start-color, ... , last-color )Copy the code

The first parameter:

From Angle: initial Angle, optional. Default: top to bottom position: position of the cone

The second parameter:

Start-color: defines the start color stop-color: defines the end color

1. The first parameter

Again, the first argument can be null, the default Angle is 0deg, and the center of the cone is the center of the shape. Such as:

background-image: conic-gradient(#69f.#fd44ff); 
Copy the code

We can change the starting Angle, for example:

background-image: conic-gradient(from -90deg.#69f.#fd44ff); 
Copy the code

Change the position of the cone center:

background-image: conic-gradient(from -90deg at 80px 120px.#69f.#fd44ff)
Copy the code

2. The second parameter

As with linear and radial gradients, you can set the color and the starting position of the gradient. The parameters accepted by the position are percentage and Angle. Such as:

background-image: conic-gradient(#69f 10%.#fd44ff 10%);
Copy the code

The above code is equivalent to:

background-image: conic-gradient(#69f 36deg.#fd44ff 36deg);
Copy the code

The following information is displayed:

3. Repeat the taper gradient

Like linear and radial gradients, conic gradients have the property of repetition.

background-image: repeating-conic-gradient(#69f 0 36deg.#fd44ff 36deg 72deg);
Copy the code

The effect is as follows:

Does this look a little familiar?

Let’s make it a circle, add a button, and you have a lottery disk. The effect is as follows:

Address: codepen. IO/jianxiujiuc…

A cone can be used for various loading effects:

Address: codepen. IO/jianxiujiuc…

The second loading, please study it yourself!

We can use gradients to draw various effects. Such as the letter:

Codepen. IO/jianxiujiuc…

Linear gradient

1. The first parameter

2. The second parameter

Repeat the gradient

Radial gradient

1. The first parameter

2. The second parameter

3. Taper gradient

1. The first parameter

2. The second parameter

3. Repeat the taper gradient

Related Posts

TypeScript full interpretation

What you need to know – functions Debounce and Throttle

10 minutes introduction – Browser-based image recognition with YOLO