Saturday, February 9, 2019

GLOWING POPUP TEXT USING HTML CSS

Cloud Tech February 09, 2019 WEB DESIGN

GLOWING POPUP TEXT USING HTML CSS

SCROLL DOWN FOR SOURCE CODE

Also read :3D IMAGE SLIDE SHOW USING HTML CSS

Also read :CREATE A USER FEEDBACK FORM USING HTML CSS

Also read :AWESOME TRANSITION EFFECT USING HTML CSS

Also read :CREATE A SIMPLE WEB-PAGE USING HTML CSS

<!DOCTYPE html>
<html>
 <head>
  <title>Glowing Pop-Up Text</title>
 </head>
 <style type="text/css">
  body{
   margin: 0;
   padding: 0;
   background: #222222;
  }
  ul{
   position: absolute;
   top: 50%;
   left: 50%;
   margin: 0;
   padding: 0;
   display: flex;
   transform: translate(-50%, -50%);
  }
  ul li{
   list-style: none;
   font-size: 80px;
   line-height: 80px;
   margin-left: 60px;
   text-align: center;
   animation: animate 3.5s ease-in-out infinite;
   font-weight: bold;
  }
  @keyframes animate{
   0%, 40%, 100%{transform: scale(0.1);}
   20%{ transform: scale(1.8); }
  }
  ul li:nth-child(1){
   animation-delay: -1.6s;
   color: #ffff00;
   text-shadow: 0px 0px 70px #ffff00;
  }
  ul li:nth-child(2){
   animation-delay: -1.6s;
   color: #76ff03;
   text-shadow: 0px 0px 70px #76ff03;
  }
  ul li:nth-child(3){
   animation-delay: -0.8s;
   color: #4fc3f7;
   text-shadow: 0px 0px 70px #4fc3f7;
  }
  ul li:nth-child(4){
   animation-delay: -0.8s;
   color: #ba68f8;
   text-shadow: 0px 0px 70px #ba68f8;
  }
  ul li:nth-child(5){
   animation-delay: -0.8s;
   color: #f57c00;
   text-shadow: 0px 0px 70px #f57c00;
  }
  ul li:nth-child(6){
   animation-delay: -0.8s;
   color: pink;
   text-shadow: 0px 0px 70px pink;
  }
  ul li:nth-child(7){
   animation-delay: 0s;
   color: #ffff00;
   text-shadow: 0px 0px 70px #ffff00;
  }
 </style>
 <body>
  <ul>
<li>ଜ</li>
<li>ୟ</li>
<li>ଜ</li>
<li>ଗ</li>
<li>ନ୍ନା</li>
<li>ଥ</li>
<li>ସ୍ୱାମୀ</li>
</ul>
</body>
</html>