Gradients are already very common, how to make them dynamic or make them more cool?

The CSS gradient

The gradient data type set in the CSS is gradient data type, which is a special image data type. Use background-image to set multiple Settings.

CSS3 defines two types of gradients:

Linear-gradient ()

The realization of gradient is made up of two parts: gradient line and color code. The gradient line is used to control the direction of the gradient. The color code contains a color value and a position that controls the color change of the gradient. The browser fades from each color palette to the next to create a smooth gradient. You can create a multi-color gradient effect by determining multiple color scales. It has become common to use gradients for backgrounds:

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

Direction (direction)

Top to bottom (default)

.foo {
    width: 100px;
    height: 100px;
    background: linear-gradient(green, yellow);
}
Copy the code

From left to right

Same thing from right to left. For compatibility reasons, different browsers use different formats:

.foo {
    background: linear-gradient(to right, green, yellow); /* Standard syntax */
    background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(right, green, yellow); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6-15 */
}
Copy the code

diagonal

.foo {
    background: linear-gradient(to bottom right, green, yellow); /* Standard syntax */
    background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6-15 */
}
Copy the code

Angle (DEG)

0deg will create a gradient from bottom to top and 90deg will create a gradient from left to right.

Color code (color – stop)

Consists of a color value followed by an optional end position (either a percentage value or length along the gradient axis).

When the position is not set, the color is evenly distributed by default.

Sometimes we don’t want to start with a gradient, and it’s best to start somewhere in the middle. This is where you can use percentages and so on.

.foo {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, green, white 10%, yellow);
    /* background: linear-gradient(to right, green, white 20px, yellow); Equivalent * /
}
Copy the code

Percentage of use:

Length of use:

The white in the middle gradually changes from 10% of the container, squeezing the green area;

Radial gradient radial gradient()

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

shape

  • Ellipse (default): ellipse

  • Circle, circle

.foo {
    background-image: radial-gradient(red, yellow, green);
}
Copy the code
.foo {
    background-image: radial-gradient(circle, red, yellow, green);
}
Copy the code

size

Define the size of the gradient:

  • Apsarp-corner (default) : Specifies the radius of the radial gradient as the length from the center of the circle to the Angle farthest from the center

    .foo {
    background-image: radial-gradient(ellipse farthest-corner at 80px 50px, red, yellow, green);
}
Copy the code

  • Closest side: The edge shape of the gradient is tangent to the side closest to the center of the gradient (circle) or at least to the vertical and horizontal sides closest to the center of the gradient (ellipse).

    .foo {
    background-image: radial-gradient(closest-side at 80px 50px, red, yellow, green);
}

.bar {
    background-image: radial-gradient(circle closest-side at 80px 50px, red, yellow, green);
}
Copy the code

    The gradient ellipse is tangent to the vertical and horizontal edges nearest the center point:

    The gradient circle is tangent to the vertical and horizontal edges nearest the center point:

  • Closest -corner: Specifies the radius of the radial gradient as the Angle closest to the center

  • Apelap-side: Opposite to Closest -side, the edge shape is tangent to the side of the container farthest from the center of the gradient (or the furthest vertical and horizontal side).

position

Position is similar to background-position or transform-origin. The default value is center.

color

Similar to Linear-gradient, color + a percentage value or length;

Repeated gradient repetition

repeating-linear-gradient()

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...) ;Copy the code
background-image: repeating-linear-gradient(90deg.red.yellow10%)." >Copy the code

Interesting gameplay:

.foo {
    width: 200px;
    height: 100px;
    background-image: repeating-linear-gradient(45deg, orange, orange 25px, #FFF 25px, #FFF 50px);
}
Copy the code

45deg:

.

Nearly a hundred sliders made by the big guy using gradient: Sliders examples

repeating-radial-gradient()

Achieve the record effect by using background overlay:

<div class='record'></div>
Copy the code
.record {
    position: relative;
    margin: 0 auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background:
        linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0.linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%.repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%.100% 50%.100% 100%;
    box-shadow: 5px 10px 20px #ccc;
}
.record:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33,
        inset 0 0 0 27px #da5b33;
    background: #fff;
    content: ' ';
}
Copy the code

Zhang Xinxu -10 demo examples learn how to CSS3 radial graduate-gradient

Dynamic change

By pre-setting the gradient, the animation moves background-position to display the effect of dynamic gradient changes. To make the beginning and end of the animation look seamless, the beginning and end of the gradient should be the same color;

<div class="dynamics"></div>
Copy the code
.dynamics {
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #944fa8, #496eaa);
    background-size: 1400% 300%;
    animation: dynamics 20s ease infinite;
    -webkit-animation: dynamics 20s ease infinite;
    -moz-animation: dynamics 20s ease infinite;
}
@keyframes dynamics {
    0% {
        background-position: 0% 0%; 50%} {background-position: 50% 100%; 100%} {background-position: 100% 0%; }}Copy the code

reference

MDN-linear-gradient

MDN-radial-gradient

The effect

Originally published on his blog: Shiba Inu STUDIO CQ STUDIO

The effect can be seen on my blog side of the article, nuggets can not write animation ~