3d Glowing Text HTML & CSS

Create Awesome Glowing 3d Text with this Fun HTML & CSS Code


*Featured Code submitted and Created By Amir Ahmad.





HTML


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d Text</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
    <div id="view">
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
        <h1>LOVE FOR ALL</h1>
    </div>
    <div id="view2">
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>
        <h1>HATRED FOR NONE</h1>  
</div>
</body>
</html>


CSS


@import url(https://fonts.googleapis.com/css?family=Concert+One);    


* { box-sizing:border-box; }
body {
  background:#0a0a0a;
  overflow:hidden;
  text-align:center;
}

#view,#view2 {
  animation:wobble 5s ease-in-out infinite;
  transform-origin:center center;
  transform-style:preserve-3d;
  //transform:rotateY(60deg);
}

@keyframes wobble {
  0%,100%{ transform:rotate3d(1,1,0,40deg); }
  25%{ transform:rotate3d(-1,1,0,40deg); }
  50%{ transform:rotate3d(-1,-1,0,40deg); }
  75%{ transform:rotate3d(1,-1,0,40deg); }
}

#view h1 {
  //animation:glow 10s ease-in-out infinite;
  display:block;
  width:100%;
  padding:20px;
  line-height:1.5;
  font:900 2.5em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  color:#0a0a0a;
  -webkit-text-stroke:1px #0f0;
}
#view2 h1 {
margin-top:150px;
  display:block;
  width:100%;
  padding:20px;
  line-height:1.5;
  font:900 2em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  color:white;
  animation:glow 10s ease-in-out infinite;
}

@keyframes glow {
  0%,100%{ text-shadow:0 0 30px #f00; }
  25%{ text-shadow:0 0 30px #0f0; }
  50%{ text-shadow:0 0 30px #00f; }
  75%{ text-shadow:0 0 30px #ff0; }
}
#view h1:nth-child(1){ transform:translateZ(0px); }
#view h1:nth-child(2){ transform:translateZ(1px); }
#view h1:nth-child(3){ transform:translateZ(2px);}
#view h1:nth-child(4){ transform:translateZ(3px); }
#view h1:nth-child(5){ transform:translateZ(4px); }
#view h1:nth-child(6){ transform:translateZ(5px); }
#view h1:nth-child(7){ transform:translateZ(6px); }
#view h1:nth-child(8){ transform:translateZ(7px); }
#view h1:nth-child(9){ transform:translateZ(8px); }
#view h1:nth-child(10){ transform:translateZ(9px); }
#view h1:nth-child(11){ transform:translateZ(10px); }
#view h1:nth-child(12){ transform:translateZ(11px); }
#view h1:nth-child(13){ transform:translateZ(12px); }
#view h1:nth-child(14){ transform:translateZ(13px); }
#view h1:nth-child(15){ transform:translateZ(14px); }
#view h1:nth-child(16){ transform:translateZ(15px); }
#view h1:nth-child(17){ transform:translateZ(16px); }
#view h1:nth-child(18){ transform:translateZ(17px); }
#view h1:nth-child(19){ transform:translateZ(18px); }
#view h1:nth-child(20){ transform:translateZ(19px); }
#view h1:nth-child(21){ transform:translateZ(20px); }
#view h1:nth-child(22){ transform:translateZ(21px); }
#view h1:nth-child(23){ transform:translateZ(22px); }
#view h1:nth-child(24){ transform:translateZ(23px); }
#view h1:nth-child(25){ transform:translateZ(24px); }
#view h1:nth-child(26){ transform:translateZ(25px); }
#view h1:nth-child(27){ transform:translateZ(26px); }
#view h1:nth-child(28){ transform:translateZ(27px); }
#view h1:nth-child(29){ transform:translateZ(28px); }
#view h1:nth-child(30){ transform:translateZ(29px); }
#view h1:nth-child(31){ transform:translateZ(30px); }
#view h1:nth-child(32){ transform:translateZ(31px); }
#view h1:nth-child(33){ transform:translateZ(32px); }
#view h1:nth-child(34){ transform:translateZ(33px); }
#view h1:nth-child(35){ transform:translateZ(34px); }
#view h1:nth-child(36){ transform:translateZ(35px); }
#view h1:nth-child(37){ transform:translateZ(36px); }
#view h1:nth-child(38){ transform:translateZ(37px); }
#view h1:nth-child(39){ transform:translateZ(38px); }
#view h1:nth-child(40){ transform:translateZ(39px); }
#view h1:nth-child(41){ transform:translateZ(40px); }
#view h1:nth-child(42){ transform:translateZ(41px); }
#view h1:nth-child(43){ transform:translateZ(42px); }
#view h1:nth-child(44){ transform:translateZ(43px); }
#view h1:nth-child(45){ transform:translateZ(44px); }
#view h1:nth-child(46){ transform:translateZ(45px); }
#view h1:nth-child(47){ transform:translateZ(46px); }
#view h1:nth-child(48){ transform:translateZ(47px); }
#view h1:nth-child(49){ transform:translateZ(48px); }
#view h1:nth-child(50){ transform:translateZ(49px); }



#view2 h1:nth-child(2){ transform:translateZ(5px); }
#view2 h1:nth-child(3){ transform:translateZ(10px);}
#view2 h1:nth-child(4){ transform:translateZ(15px); }
#view2 h1:nth-child(5){ transform:translateZ(20px); }
#view2 h1:nth-child(6){ transform:translateZ(25px); }
#view2 h1:nth-child(7){ transform:translateZ(30px); }
#view2 h1:nth-child(8){ transform:translateZ(35px); }
#view2 h1:nth-child(9){ transform:translateZ(40px); }
#view2 h1:nth-child(10){ transform:translateZ(45px); }

Click here to see this awesome code run



More Free Code Examples:


Php with Html, Css and Javascript


Javascript Machine Learning Program


Random Animal Generator Tutorial






Comments

Popular posts from this blog