This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

Recently, I met a requirement to realize some cool buttons in my work. When I saw the renderings, the buttons were really beautiful, with bouncing, color gradient, sweeping and neon lights, which immediately aroused my curiosity and started the road of research and implementation. (Welcome to pay attention to the front end of the public number)

1. Basic reserves

To achieve these beautiful buttons, some CSS properties are mainly used, including animation, background-size, background-position and Linear-gradient (). The following is a brief overview of these four contents.

1.1 animation

The animation property is used to specify one or more groups of animations separated by commas. Its syntax is as follows. For details, see MDN:

animation: name duration timing-function delay iteration-count direction;
Copy the code

Background – the size 1.2

Background-size Sets the size of the background image. Images can retain their original size, or be stretched to a new size, or be scaled to the size of the element’s available space while maintaining their original scale. The syntax is as follows. For details, refer to MDN:

background-size: length|percentage|cover|contain;
Copy the code

1.3 background – position

Background-position Sets the initial position for each background image. This position is relative to the position layer defined by background-Origin, refer to MDN for details.

When using this property, you must pay special attention to the position specified by background-position, otherwise it is difficult to understand why the position specified by background-position is not the same as the desired position. This position is the formula for calculating the percentage of the background-position.

background-postion:x y; X: {width of container - width of background image}*x percentage, excess is hidden. Y: {height of the container - height of the background image}*y percentage, the excess is hidden.Copy the code

1.4 linear-gradient

The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors. The result belongs to the

data type, which is a special
data type, and its syntax is as follows. For detailed usage, please refer to MDN:

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

Second, effect realization

Here are four animations that make full use of CSS properties. Let’s take a look at how they work.

2.1 Bounce effect

The first effect is the bounce effect, the so-called bounce effect is the button between the size change, the idea is as follows:

  1. Create a static button;
  2. The animation property is then used to create the animation. When the animation reaches 50%, the button changes to 1.2 times, and when the animation reaches 100%, the button is restored.

<div class="button1"> <span>Copy the code
.button1 { width: 200px; height: 46px; line-height: 46px; background: #2e82ff; color: #ffffff; font-size: 18px; border-radius: 27px; Animation: zoomIn 1.5 s infinite; text-align: center; } @keyframes zoomIn {50% {transform: scale(1.2); } 100% { transform: scale(1); }}Copy the code

2.2 Color gradient effect

The second is the color gradient effect, the so-called color gradient effect is the color from one color to another, and so on, the idea is as follows:

  1. Create a static button;
  2. Add a gradient color symmetrical background color;
  3. The x axis of the background color is stretched to 200%, so that the background color of the original axis of symmetry is moved from the center to the right.
  4. Finally, animation is used to realize the animation of operation position and simulate the animation with constant gradient of color.

<div class="button2"> <span>Copy the code
.button2 {
    display: inline-block;
    width: 200px;
    height: 46px;
    line-height: 46px;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    text-align: center;
    background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);
    background-size: 200%;
    animation: colorGradient 1.5s infinite;
}

@keyframes colorGradient {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}
Copy the code

2.3 Scanning effect

The third is the sweeping effect, the so-called sweeping refers to a white transparent color from one end to the other end of the scanning, the idea is as follows:

  1. Create a static button;
  2. Use the ::before pseudo-element before the static button, set the background color of the element to white and slightly transparent color, and move the center position to the right side of the container by scaling;
  3. Use animation to realize animation, and constantly change the position to achieve the sweeping effect.

<div class="button3"> <span>Copy the code
.button3 { width: 200px; height: 46px; line-height: 46px; background-color: #2e82ff; color: #ffffff; font-size: 18px; text-align: center; border-radius: 27px; position: relative; } .button3::before { content: ""; position: absolute; left: 0px; width: 100%; height: 100%; background-image: Linear-gradient (to right, RGBA (255, 255, 255, 0) 30%, RGBA (255, 255, 255, 0.2) 50%, RGBA (255, 255, 255, 0) 70%); background-size: 200%; animation: wipes 1s infinite; } @keyframes wipes { 0% { background-position: 0 0; } 100% { background-position: 100% 0; }}Copy the code

2.4 Neon Effect

The fourth is the neon effect. The so-called neon effect is actually more like a diagonal line constantly moving, and its principle is as follows:

  1. Create a static button;
  2. The effect is achieved by creating a square background of 20px * 20px, and then using Linear-gradient to gradually tilt the background color in the direction of 135° to achieve a small return neon. Then repeat the entire effect through the background;
  3. Use animation to achieve animation, and constantly change the position to achieve neon effect.

<div class="button4"> <span>Copy the code
.button4 { width: 200px; height: 46px; line-height: 46px; background: #2e82ff; color: #ffffff; font-size: 18px; border-radius: 27px; text-align: center; position: relative; overflow: hidden; } .button4:before { content: ""; position: absolute; left: 0px; width: 100%; height: 100%; background-size: 20px 20px; background-image: Linear-gradient (135DEG, Rgba (255, 0, 0, 0.1) 0%, Rgba (255, 0, 0, 0.1) 25%, Rgba (255, 255, 255, 0.1) 25%, Rgba (255, 255, 0.1) 25%, Rgba (255, 255, 0.1) 255, 0.1) 50%, Rgba (255, 0, 0, 0.1) 50%, Rgba (255, 0, 0, 0.1) 75%, Rgba (255, 255, 0.1) 75%, Rgba (255, 255, 255, 0.1) 0.1) 100%); Animation: MoveBlock 0.5s Linear infinite; } @keyframes moveblock{ 0% { background-position: 0px 0px; } 100% { background-position: 20px 0px; }}Copy the code

1. If you think this article is good, share and like it so that more people can see it

2. Welcome to pay attention to the front end line and surface of the public account. The PDF version of “Front End 100 Questions Cut” is waiting for you