Current location: home page > course >Body

Alternate loading animation of two balls Pure CSS3loading animation

In recent days, we have been working on WeChat small programs. Cat Bei suggested using the loading animation of two small balls, which caused a lot of trouble.

The effect is as follows:

 Alternate loading animation of two balls Pure CSS3loading animation Page 1

Pure CSS animation, directly on the code.

HTML part:

 <! DOCTYPE html> <html> <head> <title>Ball</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="blocks">   <div class="block red"></div>   <div class="block blue"></div> </div> </body> </html>

CSS part:

 .blocks {   height: 100vh;   display: flex;   align-items: center;   position: relative;   justify-content: center; } .block {   height: 15px;   width: 15px;   border-radius: 50%;   -webkit-transform: translateX(0);   transform: translateX(0);   mix-blend-mode: lighten; } .red {   background: #FA167C;   -webkit-animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;   animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; } .blue {   background: #0A0BF5;   -webkit-animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse;   animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; } @-webkit-keyframes attract-orange {   to {     -webkit-transform: translateX(calc(20px + calc(20px / 4)));     transform: translateX(calc(20px + calc(20px / 4)));   } } @keyframes attract-orange {   to {     -webkit-transform: translateX(calc(20px + calc(20px / 4)));     transform: translateX(calc(20px + calc(20px / 4)));   } } @-webkit-keyframes attract-blue {   to {     -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4)));     transform: translateX(calc(20px * -1 - calc(20px / 4)));   } } @keyframes attract-blue {   to {     -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4)));     transform: translateX(calc(20px * -1 - calc(20px / 4)));   } }