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>Document</title> </head> <body> <div class="bt AA">...</div> <div class="bb AA">..</div> </body> </html>
.AA{ width: 200px; height: 200px; background: red; display: block; margin: 20px auto; border: 5px solid ; border-image: linear-gradient(45deg,red,blue,green)1; box-shadow: 0 0 10px,0 0 20px; animation: awal 3s infinite alternate-reverse; } @keyframes awal { 0%{filter: hue-rotate(0deg);} 100%{filter: hue-rotate(360deg);} } .bt{ animation: nan 5s ease alternate-reverse; } @keyframes nan{ to{ transform: translateX(80vw) rotateX(360deg) scale(2);} } .bb{ animation: nana 5s ease alternate-reverse; } @keyframes nana { to{ transform: translateX(-80vw) rotateY(360deg) scale(2);} }
/* 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>Document</title> </head> <body> <div class="bt AA">...</div> <div class="bb AA">..</div> </body> </html>
.AA{ width: 200px; height: 200px; background: red; display: block; margin: 20px auto; border: 5px solid ; border-image: linear-gradient(45deg,red,blue,green)1; box-shadow: 0 0 10px,0 0 20px; animation: awal 3s infinite alternate-reverse; } @keyframes awal { 0%{filter: hue-rotate(0deg);} 100%{filter: hue-rotate(360deg);} } .bt{ animation: nan 5s ease alternate-reverse; } @keyframes nan{ to{ transform: translateX(80vw) rotateX(360deg) scale(2);} } .bb{ animation: nana 5s ease alternate-reverse; } @keyframes nana { to{ transform: translateX(-80vw) rotateY(360deg) scale(2);} }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...