WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>nana</title> </head> <body> <div class="gg"> <div class="mm"> <div class=" br"><h1>.</h1></div> <div class=" br"><h1>.</h1></div> </div> <div class="rr">.</div> <div class="bt">.</div> </div> </body> </html>
.gg{ width: 400px; background: red; height: 400px; border-radius: 50%; margin: 100px auto; } h1{ color: white; text-align: center; font-size: 40px; } .mm{ display: flex; } .br{ height: 100px; background: black; border-radius: 50%; width: 50px; display: block; margin: auto; margin-top: 60px; animation: awal 2s infinite alternate-reverse; } .rr{ width: 100px; background: black; height: 100px; display: block; border-radius: 50%; margin: auto; } .bt{ width: 150px; background: black; border-radius: 20px 20px 20px 20px; height: 50px; display: block; margin: 30px auto; } @keyframes awal{ 0%{ transform: translateX(0); } 25%{ transform: translateX(20px); } 50%{ transform: translateX(-20px); } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>nana</title> </head> <body> <div class="gg"> <div class="mm"> <div class=" br"><h1>.</h1></div> <div class=" br"><h1>.</h1></div> </div> <div class="rr">.</div> <div class="bt">.</div> </div> </body> </html>
.gg{ width: 400px; background: red; height: 400px; border-radius: 50%; margin: 100px auto; } h1{ color: white; text-align: center; font-size: 40px; } .mm{ display: flex; } .br{ height: 100px; background: black; border-radius: 50%; width: 50px; display: block; margin: auto; margin-top: 60px; animation: awal 2s infinite alternate-reverse; } .rr{ width: 100px; background: black; height: 100px; display: block; border-radius: 50%; margin: auto; } .bt{ width: 150px; background: black; border-radius: 20px 20px 20px 20px; height: 50px; display: block; margin: 30px auto; } @keyframes awal{ 0%{ transform: translateX(0); } 25%{ transform: translateX(20px); } 50%{ transform: translateX(-20px); } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...