texte animate css

<!DOCTYPE html>
<html>
<head>
  <title>Texte animer avec css | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="Texte animer avec css">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
  <span>A</span>
  <span>S</span>
  <span>S</span>
  <span>A</span>
  <span>L</span>
  <span>A</span>
  <span>M</span>
</h1>
</body>
</html>
html, body {
    width: 100%;  
    height: 100%;
    background: #76b852;
    background: -webkit-linear-gradient(to left, #76b852 , #8DC26F);
    background: linear-gradient(to left, #76b852 , #8DC26F);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  h1 {
    height: 100px;
  }
  
  h1 span {
    position: relative;
    top: 20px;
    display: inline-block;
    animation: bounce .3s ease infinite alternate;
    font-family: 'Titan One', cursive;
    font-size: 80px;
    color: #FFF;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 transparent,
                 0 7px 0 transparent,
                 0 8px 0 transparent,
                 0 9px 0 transparent,
                 0 10px 10px rgba(0, 0, 0, .4);
  }
  
  h1 span:nth-child(2) { animation-delay: .1s; }
  h1 span:nth-child(3) { animation-delay: .2s; }
  h1 span:nth-child(4) { animation-delay: .3s; }
  h1 span:nth-child(5) { animation-delay: .4s; }
  h1 span:nth-child(6) { animation-delay: .5s; }
  h1 span:nth-child(7) { animation-delay: .6s; }
  h1 span:nth-child(8) { animation-delay: .7s; }
  
  @keyframes bounce {
    100% {
      top: -20px;
      text-shadow: 0 1px 0 #CCC,
                   0 2px 0 #CCC,
                   0 3px 0 #CCC,
                   0 4px 0 #CCC,
                   0 5px 0 #CCC,
                   0 6px 0 #CCC,
                   0 7px 0 #CCC,
                   0 8px 0 #CCC,
                   0 9px 0 #CCC,
                   0 50px 25px rgba(0, 0, 0, .2);
    }
  }

                                    
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Manual Slideshow

Manual Slideshow

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style03

Input range slider HTML style03

Input file style01

Input file style01

Image hover 04

Image hover 04

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Drag and drop or upload input file

Drag and drop or upload input file

Convertir une div en image

Convertir une div en image

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery