.rectangle1 {
  height: 10px;
  width: 100px;
  background-color: #88d1fe;
  border-radius:10px;
  transition: 1s ease-in-out;
  transform:rotate(-45deg);
 
  box-shadow:0 0 3px #88d1fe;
  overflow:hidden;
  animation: glowblue 1.9s ease-in-out infinite forward;
  
}

.rectangle {
  height: 10px;
  width: 150px;
  background-color: #cd52e5;
  border-radius:10px;
  transform:rotate(-45deg) ;
 
  transition: 1s ease-in-out;
  box-shadow:0 0 3px #cd52e5;
   animation: glowpink 1.6s ease-in-out infinite alternate;
}

.rectangle2 {
  height: 10px;
  width: 50px;
  background-color: #ffff00;
  border-radius:10px;
  transform:rotate(-45deg) ;
 
  transition: 1s ease-in-out;
  box-shadow:0 0 3px #cd52e5;
  animation: glowyellow .9s ease-in-out infinite alternate;
}


.rectangle3 {
  height: 10px;
  width: 150px;
  background-color: #ff2005;
  border-radius:10px;
  transform:rotate(-45deg) ;
 
  transition: 1s ease-in-out;
  animation: glowred 1.3s ease-in-out infinite alternate;
}



.rectangle4 {
  height: 10px;
  width: 50px;
  background-color: #ff9900;
  border-radius:10px;
  transform:rotate(-45deg) ;
 
  transition: 1s ease-in-out;
  box-shadow:0 0 3px #ff9900;
  animation: gloworange 2s ease-in-out infinite alternate;
}

.rectangle5 {
  height: 10px;
  width: 50px;
  background-color: #66ff33;
  border-radius:10px;
  transform:rotate(-45deg) ;
  
  transition: 1s ease-in-out;
  box-shadow:0 0 3px #66ff33;
  animation: glowgreen .5s ease-in-out infinite alternate;
}


.rectangle6 {
  height: 10px;
  width: 50px;
  background-color: #6600ff;
  border-radius:10px;
  transform:rotate(-45deg) ;
  transition: 1s ease-in-out;
  box-shadow:0 0 3px #6600ff;
  animation: glowviolet 1.1s ease-in-out infinite alternate;
}



.hme {

overflow:hidden;

}

.hme:hover > .rectangle{
transform:rotate(-45deg) translate(400px,0)
}
.hme:hover > .rectangle1{
transform:rotate(-45deg) translate(520px,0)
}

.hme:hover > .rectangle2{
transform:rotate(-45deg) translate(700px,0)
}

.hme:hover > .rectangle3{
transform:rotate(-45deg) translate(650px,0)
}

.hme:hover > .rectangle4{
transform:rotate(-45deg) translate(450px,0)
}


.hme:hover > .rectangle5{
transform:rotate(-45deg) translate(150px,0)
}

.hme:hover > .rectangle6{
transform:rotate(-45deg) translate(150px,0)
}


@-webkit-keyframes glowred {
  from {
    box-shadow: 0 0 10px #a00, 0 0 20px #a00, 0 0 30px #ff8300, 0 0 40px #ff8300, 0 0 50px #ff8300, 0 0 60px #ff8300, 0 0 70px #ff8300;
  }
  
  to {
    box-shadow: 0 0 20px #f00, 0 0 30px #ff6700, 0 0 40px #ff6700, 0 0 50px #ff6700, 0 0 60px #ff6700, 0 0 70px #ff6700, 0 0 80px #ff6700;
  }
}

@-webkit-keyframes glowpink {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

@-webkit-keyframes glowblue {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #15f4ee, 0 0 40px #15f4ee, 0 0 50px #15f4ee, 0 0 60px #15f4ee, 0 0 70px #15f4ee;
  }
  
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #1b03a3, 0 0 40px #1b03a3, 0 0 50px #1b03a3, 0 0 60px #1b03a3, 0 0 70px #1b03a3, 0 0 80px #1b03a3;
  }
}

@-webkit-keyframes glowyellow {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffff00, 0 0 40px #ffff00, 0 0 50px #ffff00, 0 0 60px #ffff00, 0 0 70px #ffff00;
  }
  
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #faed27, 0 0 40px #faed27, 0 0 50px #faed27, 0 0 60px #faed27, 0 0 70px #faed27, 0 0 80px #faed27;
  }
}

@-webkit-keyframes gloworange {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00, 0 0 60px #ffcc00, 0 0 70px #ffcc00;
  }
  
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #ff6600, 0 0 40px #ff6600, 0 0 50px #ff6600, 0 0 60px #ff6600, 0 0 70px #ff6600, 0 0 80px #ff6600;
  }
}


@-webkit-keyframes glowgreen {
  from {
    box-shadow: 0 0 10px #ccffcc, 0 0 20px #ccffcc, 0 0 30px #ccff99, 0 0 40px #ccff99, 0 0 50px #ccff99, 0 0 60px #ccff99, 0 0 70px #ccff99;
  }
  
  to {
    box-shadow: 0 0 20px #ccffcc, 0 0 30px #009900, 0 0 40px #009900, 0 0 50px #009900, 0 0 60px #009900, 0 0 70px #009900, 0 0 80px #009900;
  }
}


@-webkit-keyframes glowviolet {
  from {
    box-shadow: 0 0 10px #6666ff, 0 0 20px #6666ff, 0 0 30px #6666ff, 0 0 40px #6666ff, 0 0 50px #6666ff, 0 0 60px #6666ff, 0 0 70px #6666ff;
  }
  
  to {
    box-shadow: 0 0 20px #6666ff, 0 0 30px #6600cc, 0 0 40px #6600cc, 0 0 50px #6600cc, 0 0 60px #6600cc, 0 0 70px #6600cc, 0 0 80px #6600cc;
  }
}