WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<div class="container"> <div class="circle"></div> <div class="circle2"></div> </div>
*{ margin: 0; padding: 0; } body{ background-color: transparent; width: 100vw; height: 100vh; font-family:'Courier New', Courier, monospace; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .container{ display: flex; width: 40px; height: 20px; align-items: center; justify-content: center; } .circle{ background: red; opacity: 0.95; border-radius: 50%; width: 10px; height: 10px; animation: rotateRed 1.2s linear infinite; } .circle2{ background: cyan; opacity: 0.95; border-radius:50%; width: 10px; height: 10px; mix-blend-mode: darken; animation: rotateCyan 1.2s linear infinite; } @keyframes rotateRed{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 1.15;transform: translateX(20%);} 50%{transform: translateX(100%);} 51%{scale: 1;} } @keyframes rotateCyan{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 0.85;transform: translateX(-20%);} 50%{transform: translateX(-100%)} 51%{scale: 1;} }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<div class="container"> <div class="circle"></div> <div class="circle2"></div> </div>
*{ margin: 0; padding: 0; } body{ background-color: transparent; width: 100vw; height: 100vh; font-family:'Courier New', Courier, monospace; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .container{ display: flex; width: 40px; height: 20px; align-items: center; justify-content: center; } .circle{ background: red; opacity: 0.95; border-radius: 50%; width: 10px; height: 10px; animation: rotateRed 1.2s linear infinite; } .circle2{ background: cyan; opacity: 0.95; border-radius:50%; width: 10px; height: 10px; mix-blend-mode: darken; animation: rotateCyan 1.2s linear infinite; } @keyframes rotateRed{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 1.15;transform: translateX(20%);} 50%{transform: translateX(100%);} 51%{scale: 1;} } @keyframes rotateCyan{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 0.85;transform: translateX(-20%);} 50%{transform: translateX(-100%)} 51%{scale: 1;} }
/* Replace with your JS Code (Leave empty if not needed) */