WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
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> <h1> <span class="bt">B</span> <span class="ba">O</span> <span class="bc">N</span> <span class="bb">S</span> <span class="bp">O</span> <span class="br">I</span> <span class="bn">R</span> </h1> </body> </html>
body{ margin: 0; background: radial-gradient(red,blue); } h1{ display: flex; justify-content: center; margin-top: 250px; } .bt{ animation: awal 0.3s infinite 1s alternate-reverse ; } .ba{ animation: awal 0.4s infinite 1s alternate-reverse; } .bb{ animation: awal 0.5s infinite 1s alternate-reverse; } .bc{ animation: awal 0.6s infinite 1s alternate-reverse; } .bp{ animation: awal 0.7s infinite 1s alternate-reverse; } .br{ animation: awal 0.8s infinite 1s alternate-reverse; } .bn{ animation: awal 0.8s infinite 1s alternate-reverse; } @keyframes awal { from{ transform: translateY(0); } to{ transform: translateY(30px); } }
/* 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> <h1> <span class="bt">B</span> <span class="ba">O</span> <span class="bc">N</span> <span class="bb">S</span> <span class="bp">O</span> <span class="br">I</span> <span class="bn">R</span> </h1> </body> </html>
body{ margin: 0; background: radial-gradient(red,blue); } h1{ display: flex; justify-content: center; margin-top: 250px; } .bt{ animation: awal 0.3s infinite 1s alternate-reverse ; } .ba{ animation: awal 0.4s infinite 1s alternate-reverse; } .bb{ animation: awal 0.5s infinite 1s alternate-reverse; } .bc{ animation: awal 0.6s infinite 1s alternate-reverse; } .bp{ animation: awal 0.7s infinite 1s alternate-reverse; } .br{ animation: awal 0.8s infinite 1s alternate-reverse; } .bn{ animation: awal 0.8s infinite 1s alternate-reverse; } @keyframes awal { from{ transform: translateY(0); } to{ transform: translateY(30px); } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...