First look at the effect:

Principle:

This effect is quite common on the Internet, so I wrote an article to document it. The principle is relatively simple, basically is to have a blue background color of the circle; The circle then has one or two curved white square boxes rotating, obscuring the blue by the white to form a wave-like parallax.

Implementation:

(quan is the circle, while Shui is the blue background in the circle.

 <div class="quan">
      <div class="shui"></div>
    </div>
Copy the code

2. Basic style, so that basically get a blue background of the circle, the details do not say to see yourself ~

 .quan{
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 3px solid rgb(246.247.248);
            box-shadow: 0 0 0 3px rgb(41.134.196);
           
        }
        .shui{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(23.106.201);
            border-radius: 50%;
            overflow: hidden;
        }
Copy the code

3. Define pseudo classes, which are angular boxes to rotate:

 .shui::after{
            content: ' ';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;   
            border-radius: 40%;
            background-color: rgb(240.228.228);
            animation: shi 5s linear infinite;
            
        }
Copy the code

4. Implement, offset the white box to cover the top half of the circle, and then let it rotate:

 @keyframes shi{
            0%{
                transform: translate(-50%, -65%) rotate(0deg);
               
            }
            100%{
                transform: translate(-50%, -65%) rotate(360deg); }}Copy the code

5. Same as above, create another white box, but make sure the background color is transparent and not overwrite the previous one:

 .shui::before{
            content: ' ';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;   
            border-radius: 42%;
            background-color: rgb(240.228.228.0.2);
            animation: xu 7s linear infinite;
            
        }
        @keyframes xu{
            0%{
                transform: translate(-50%, -60%) rotate(0deg);
               
            }
            100%{
                transform: translate(-50%, -60%) rotate(360deg); }}Copy the code

Complete code:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>* {padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(240.228.228);
        }
        .quan{
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 3px solid rgb(246.247.248);
            box-shadow: 0 0 0 3px rgb(41.134.196);
           
        }
        .shui{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(23.106.201);
            border-radius: 50%;
            overflow: hidden;
        }
        .shui::after{
            content: ' ';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;   
            border-radius: 40%;
            background-color: rgb(240.228.228);
            animation: shi 5s linear infinite;
            
        }
        @keyframes shi{
            0%{
                transform: translate(-50%, -65%) rotate(0deg);
               
            }
            100%{
                transform: translate(-50%, -65%) rotate(360deg); }}.shui::before{
            content: ' ';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;   
            border-radius: 42%;
            background-color: rgb(240.228.228.0.2);
            animation: xu 7s linear infinite;
            
        }
        @keyframes xu{
            0%{
                transform: translate(-50%, -60%) rotate(0deg);
               
            }
            100%{
                transform: translate(-50%, -60%) rotate(360deg); }}</style>
</head>
<body>
    <div class="quan">
      <div class="shui"></div>
    </div>
</body>
</html>
Copy the code

Conclusion:

Life is not only the present, there are poems and distant fields ~ come on, everything can be!