Writing in the front

The author recently interview just met this question, in the past do this kind of demand is often asked designers to two pictures before and after the breath, more or directly GIF finished, really want to start pure USE of CSS3 for a while will be confused, so they are ready to seriously masturbate a button breathing, see what uncomplicated. First look at the preview of other people’s homes, we have to do one:

                                                  

First glance analysis:

  1. In the middle of the white circle looming
  2. White circles ripple out on both sides

Step 1: Find an arrow diagram

I went to Ali font white piao a ~

To make it easier to see the effect, I used a transparent bottom image with dom elements on a dark background. The following

2. Start building loops

<div id="breath-btn">        
    <div id="inner" class="white-border">            
        <img class="arrow" src="./arrow.png" />        
     </div> 
</div>

html, body {
    height: 100vh;
    background: #0078db;

}

#breath-btn {
    width: 80px;
    height: 80px;
    position: relative;
    display: inline-block;
    margin: auto 50%;
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-border{
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.arrow {
    width: 70%;
}
Copy the code

We’ve almost got the layout

3. The white circle in the middle is indistinct

Define it by writing an animation @keyframes

#inner { animation: OpacityBreath 2s ease-in-out infinite; Opacity: 0.3; } @keyframes OpacityBreath {0% {opacity: 0.3; Opacity: 0.65; Opacity: 0; }}Copy the code

It looks like a deal. For now.

4. Create ripples

Here comes the big one. Through slow down and careful observation, it was found that the outer ring was the first to pop up, but the inner ring was faster. As for how to do it, use the Transform scale to expand the circle and add transparency changes. The outer waves are made of pseudo-classes to save DOM elements, so it’s really convenient to use pseudo-classes.

#breath-btn::before, #breath-btn::after { content: ''; border: 2px solid #fff; width: 50px; height: 50px; position: absolute; opacity: 0; border-radius: 50%; } @keyframes Wave { 0% { transform: scale(1); Opacity: 0.3; } 100% { transform: scale(2); opacity: 0; }}Copy the code

5. The ripple moves.

It should not be difficult to make the ripples move, I thought so at that time. Write the following styles without thinking

# breath-bTN ::before {animation: Wave 1.1s ease-in-out infinite; } #breath- BTN ::after {animation: Wave 0.2s ease-in-out 0.2s infinite; }Copy the code

The outermost circle is set to finish in 1.1s, and the inner speed is 0.7s faster and the delay time is 0.4s, resulting in a sense of visual pursuit. However, the problem is that the animation’s delay time only takes effect for the first time, which is really confusing. After the first successful pursuit, the whole thing is chaotic. I really hope CSS can strengthen this property. As a result, the author finally uses script to solve:

Breath-btn-animation ::before {animation: Wave 1.1s ease-in-out; }. Breath -btn-animation::after {animation: Wave 0.5s ease-in-out 0.5s; } <body> <div id="breath-btn"> <div id="inner" class="white-border"> <img class="arrow" src="./arrow.png" /> </div> < / div > < script SRC = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js" > < / script > < script > function toggleWave () { $('#breath-btn').toggleClass('breath-btn-animation'); setTimeout(() => { toggleWave() }, 1800) } toggleWave(); </script> </body>Copy the code

Dynamically switch breath-bTN-Animation with jquery to make the two layer ripple circles jump once, and then set the delay time. The final effect is as follows:

The end result is almost the same, the animation time and curve algorithm need to be adjusted.

conclusion

Development of a small button breathing state, can not help but sigh CSS is really magical, on the way to development also encountered a transform-Origin problem caused to change the layout of the pseudo-class, this will be put into the next period to study it.

Ps (nuggets rich text editing is too difficult to use, copy code must be plain text paste, or newline GG)