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); }
Comments
Post a Comment