Something that doesn’t work at the code level, but you don’t like, is the rotation effect

Okay, roll up your sleeves, fuck

This is a simple effect made by xiaobian, GIF will not be captured, you can imagine 😄 next, let’s spend five minutes to do step by step: first: draw the trajectory (line), and the first ball

`<div class="wrap>
    <div class='plant'>
      <div class='ball'>ball1</div>
    </div>
</div>`
Copy the code
<style>.wrap {display: flex; background-image: url('./bg2.jpg'); background-size: cover; width: 500px; height: 500px; align-items: center; justify-content: center; } .planet { position: absolute; border: 2px solid #13c2c2; width: 300px; height: 300px; } .ball { width: 50px; height: 50px; position: absolute; border-radius: 50%; background-color: rgba(20, 12, 33, .5); left: calc(50% - 25px); top: -25px; text-align: center; line-height: 50px; color: #13c2c2; } </style>`Copy the code

Effect:

Border-left: (50%-25px); border-left: -25px; border-left: -25px; border-left: -25px; border-left: -25px; border-left: -25px;

Second: rotation zoom trajectory, ball:

.planet { transform-style: preserve-3d; The transform: scaleY (0.5) rotateZ (30 deg); border-radius: 50%; } .ball { transform: rotateZ(-30deg) scaleY(2); }Copy the code

Third: Get moving

@keyFrames Planet -rotate {0% {transform: rotate(30deg) scaleY(0.5) rotate(0); Rotate (0deg) rotate(0deg) rotate(0deg); @keyframes self-rotate {0% {transform: rotate(0) rotate(2) rotate(-30deg); // @keyframes self-rotate {0% {transform: rotate(0) rotate(2) rotate(-30deg); } 100% { transform: rotate(-360deg) scaleY(2) rotate(-30deg); } } .planet { animation: planet-rotate 16s linear infinite; }. Ball {self-rotate 16s linear infinite; }Copy the code

Once one is implemented, the rest is easy. The simplest is to position the desired balls before the first rotation, and attach the final code

<style>
       .wrap {
            display: flex;
            background-image: url('./bg2.jpg');
            background-size: cover;
            width: 500px;
            height: 500px;
            align-items: center;
            justify-content: center;
        }

        .planet {
            position: absolute;
            border: 2px solid #13c2c2;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: scaleY(0.5) rotateZ(30deg);
            border-radius: 50%;
           
        }

        .ball {
            width: 50px;
            height: 50px;
            position: absolute;
            border-radius: 50%;
            background-color: rgba(20.12.33.. 5);
            left: calc(50% - 25px);
            top: -25px;
            text-align: center;
            line-height: 50px;
            color: #13c2c2;
            transform: rotateZ(-30deg) scaleY(2);
        }
        .second {
            left: calc(50% + 125px);
            top: 125px;
        }
        .third {
            left: calc(50% - 25px);
            top: 275px;
        }
        .four {
            left: calc(50% - 175px);
            top: 125px;
        }
        
        /* // Revolution animation */
        @keyframes planet-rotate {
        0% {
            transform:  rotate(30deg) scaleY(0.5) rotate(0);
        }
        100% {
            transform:  rotate(30deg) scaleY(0.5) rotate(360deg); }}/* // Spin animation */
        @keyframes self-rotate {
        0% {
            transform: rotate(0) scaleY(2) rotate(-30deg);
        }
        100% {
            transform: rotate(-360deg) scaleY(2) rotate(-30deg);
        }
        }

        .planet {
            animation: planet-rotate 16s linear infinite;
        }

        .ball {
            animation: self-rotate 16s linear infinite;
        } 
    </style>
</head>
<body>
    <div id="app">
        <div class='wrap'>
            <div class='planet'>
                <div class='ball'>ball1</div>
                <div class='ball second'>ball2</div>
                <div class='ball third'>ball3</div>
                <div class='ball four'>ball4</div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app'.data() {
              return{}},methods: {},})</script>
</body>
Copy the code