Header with background animate 01

<!DOCTYPE html>
<html>
<head>
	<title>BACKGROUND OVERLAY | 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="BACKGROUND OVERLAY">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>

	<div class="menu" id="menu">
		<li><a href="#">ACCUEIL</a></li>
		<li><a href="#">ABOUT ME</a></li>
		<li><a href="#">MY WORKS</a></li>
		<li><a href="#">CONTACT ME</a></li>
	</div>
	<div class="container gradient-purple-blue">
	  <div class="under-container bubble" style="height:90vh;">
		<div class="line">
		  <div class="square" id="square">H</div>
		  <div class="square" >e</div>
		  <div class="square" >l</div>
		  <div class="square" >l</div>
		  <div class="square" >o</div>
		  <div class="square" style="margin-left:30px;">I</div>
		  <div class="square" >'</div>
		  <div class="square" >m</div>
		</div>
		<div class="line">
		  <div class="square" >P</div>
		  <div class="square" >a</div>
		  <div class="square" >u</div>
		  <div class="square" >l</div>
		</div>
	  </div>
	  <div class="under-container" style="height:10vh">
		<div class="mouse">
		  <div class="molette"></div>
		</div>
	  </div>
	  </div>
	</div>
	<div class="container" id="secondcontainer">
	  <div class="under-container">
		<div class="profil-picture" id="profilpicture">
		</div>
	  </div>
	</div>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
	<script src="script.js"></script>
</body>
</html>
/*@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,500,500i,600,600i,700,700i|Monoton|Yellowtail');*/
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700,800,900&subset=latin-ext');

body {
  font-family:'Quicksand';
  margin:0;
}
.container {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  width:100vw;
  max-width:100%;
  height:100vh;
  /*background:url('https://images.unsplash.com/photo-1511227499331-25c621db940e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2e7e55bd948e728345b7ed558d550053&auto=format&fit=crop&w=1400&q=80');
  background-size:cover;
  background-position:50% 50%;*/
}
.gradient-purple-blue {
  background-image: linear-gradient(30deg, #8E78FF, #B9DEDB);
}
.under-container {
  width:100vw;
  max-width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.title {
  font-size:50px;
  color:white;
}

.menu {
  width:100vw;
  max-width:100%;
  display:flex;
  justify-content:space-around;
  position:fixed;
  transition:opacity 0.5s;
  z-index:1;
}

.menu li {
  padding:30px;
  list-style: none;
}

.menu li a {
  color:white;
  text-decoration:none;
  font-weight:900;
}


.line {
  display:flex;
  position:relative;
  z-index:3;
}

.square {
  font-size:100px;
  font-weight:900;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  cursor:default;
  transition:all 0.3s;
  color:#fff;
}

.square:hover {
  color:#08FDD8;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    -ms-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1)
  }
  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    -ms-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }
  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    -ms-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }
  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    -ms-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand
}

.mouse {
  display:flex;
  width:30px;
  height:50px;
  border:2px solid #fff;
  border-radius:30px;
}

.molette {
  margin:12px auto auto auto;
  width:3px;
  height:3px;
  background-color:#fff;
  border: 1px solid #fff;
  border-radius: 90px;
  animation: scroll 2s ease infinite;
}

@keyframes scroll {
  0%{opacity:0; margin:10px auto auto auto;}
  10%{opacity:1;}
  50%{margin:10px auto auto auto;}
  90%{opacity:1;}
  100%{opacity:0; margin:18px auto auto auto;}
}

.mousetext{
  color:#fff;
  font-weight: 500;
}

/* bubble inspired by Mattia Astorino https://codepen.io/equinusocio/pen/jezBdZ*/

.bubble {
  position:relative;
}

.bubble::before
{
  content: '';
  position:absolute;
  z-index:2;
  top: 35%;
  left: 35%;
  transform: translate(-50%, -50%);
  display: block;
  width: 25vw;
  height: 25vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #43e97b,
    #38f9d7,
    #e0c3fc,
    #8ec5fc,
    #4facfe,
    #00f2fe,
    #a8edea,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform 20s linear infinite alternate,
    movement 40s linear infinite alternate,
    shade 60s linear infinite alternate;
}

.bubble::after
{
  content: '';
  position:absolute;
  z-index:2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 15vw;
  height: 10vw;
  min-height: 200px;
  min-width: 200px;
  background: linear-gradient(
    270deg,
    #00f2fe,
    #8ec5fc,
    #38f9d7,
    #4facfe,
    #a8edea,
    #43e97b,
    #e0c3fc,
    #fed6e3
  );
  background-size: 1600% 1600%;
  box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
  animation: 
    transform2 20s linear infinite alternate-reverse,
    movement 40s linear infinite alternate-reverse,
    shade 60s linear infinite alternate-reverse;
}

@keyframes transform
{
    0%,
  100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
   20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
   40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
   60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
   80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}

@keyframes transform2 {
  0%{border-radius: 42% 58% 60% 40% / 32% 54% 46% 68%}
  20%{border-radius: 59% 41% 36% 64% / 32% 64% 36% 68%}
  40%{border-radius: 48% 52% 52% 48% / 54% 53% 47% 46%}
  60%{border-radius: 42% 58% 51% 49% / 63% 64% 36% 37%}
  80%{border-radius: 32% 68% 33% 67% / 63% 35% 65% 37%}
  100%{border-radius: 34% 66% 52% 48% / 34% 53% 47% 66%}
}
@keyframes movement
{
  from { -webkit-transform: rotate(-1turn) translateY(-50px); transform: rotate(-1turn) translateY(-50px); }
    to { -webkit-transform: none; transform: none; }
}
@keyframes shade
{
  0%, 100% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
}
.profil-picture {
  display:flex;
  justify-content:center;
  align-items:center;
  width:150px;
  height:150px;
  border-radius:100%;
  background:linear-gradient(30deg, #232323, #B9BCC3);
  opacity:0;
}
.profilpicture-animation {
  animation:showprofil 0.5s forwards;
}
.profil-picture img{
  width:95%;
  height:95%;
  border-radius:100%;
}
@keyframes showprofil {
  0%{
    transform:translateY(-100%);
    opacity:0;
  }
  100%{
    transform:translateY(0%);
    opacity:1;
  }
}
var square = document.getElementsByClassName('square');

for(var i = 0; i<square.length; i++){
  square[i].addEventListener('mouseenter', function(){
    this.classList.add("rubberBand");
    this.addEventListener("animationend", function(){
      this.classList.remove("rubberBand");
    }, false);
  })
}
texte animate effects style 01

texte animate effects style 01

Vidéo background en html5 style01

Vidéo background en html5 style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Titre section avec une bande style01

Titre section avec une bande style01

Titre section avec une anmation style01

Titre section avec une anmation style01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Input range slider HTML style02

Input range slider HTML style02

Image hover 06

Image hover 06

Form login 03

Form login 03

Form Création de compte style animée

Form Création de compte style animée

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Background div gradient

Background div gradient