animation

16 programme

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>page2</title>
    <style>
      body{
        margin: 0;
        font-family: Arial, sans-serif;
        color: white;
        height: 100vh;
        justify-content: center;
        align-items: center;
        display: flex;
        background: linear-gradient(132deg,#033e4d,#05d7e6,#06585e,#09e8f8);
        background-size: 400% 400%;
      }
      h1{
        color: white;
        font-family: Arial, sans-serif;
      }
      .letter{
        display: inline-block;
        font-size: 50px;
        font-weight: bold;
        animation: bounce 1.2s infinite ease-in-out, apparition 10s ease infinite;
      }
      @keyframes bounce {
        0%, 100%{ transform: translateY(0); }
        50%{transform: translateY(-25px); 
        100%{transform: translateY(0);}}
      }
      button{
           color: white;
           background: orange;
           width: 200px;
           font-size: 20px;
           height: 30px;
           opacity: 0;
           border-radius: 15px;
           animation: apparition 30s ease infinite;
      }
      button:hover;{
        background: yellow;
      }
      @keyframes apparition {
        form{
          opacity: o;
        }
        to{
          opacity: 1;
        }
      }
      </style>
      </head>
      <body>
        <h1>
          <span class="letter" style="animation-delay: 0s">B</span>
          <span class="letter" style="animation-delay: 0.1s">O</span>
          <span class="letter" style="animation-delay: 0.2s">N</span>
          <span class="letter" style="animation-delay: 0.3s">J</span>
          <span class="letter" style="animation-delay: 0.4s">O</span>
          <span class="letter" style="animation-delay: 0.5s">U</span>
          <span class="letter" style="animation-delay: 0.6s">R</span>
      </h1>
      <button onclick="ouvrirPage()">clique ici</button> 
      <script>
        function ouvrirPage() {
          window.location.href="index.html";
        }
      </script> 
</body>
</html>

CSS

animation

Recommended