<link href='https://fonts.googleapis.com/css?family=Arvo:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:300,100' rel='stylesheet' type='text/css'>
<span class="outline end-right">
TYGER
</span>
<span class="outline end-left">
TYGER
</span>
<span class="orbs">
<span>b</span>
<span>u</span>
<span>r</span>
<span>n</span>
<span>i</span>
<span>n</span>
<span>g</span>
</span>
<span class="glow">
BRIGHT
</span>
@import "bourbon";
*{
box-sizing: border-box;
}
body{
background: black;
}
span{
margin: 0;
padding: 0;
}
.end-left{
margin-left: -235px;
}
.end-right{
margin-right: -117.5px;
}
.outline{
position: absolute;
top: 20px;
}
.outline{
color: black;
-webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: orange;
font-size: 64px;
font-family: 'Arvo', serif;
}
.orbs{
font-family: 'Raleway', sans-serif;
font-weight: 100;
display: block;
font-size: 128px;
span{
color: red;
display: inline-block;
text-align: center;
border-radius: 50%;
text-shadow: 0 0 20px orange, 1px 1px 20px orange, 2px 2px 20px orange, -1px -1px 20px orange, -2px -2px 20px orange;
position: absolute;
left: 50%;
&:first-child{
margin-left: -210px;
}
&:not(:first-child){
margin-left: -35px;
}
}
}
.glow{
opacity: 0;
font-family: 'Arvo', serif;
font-weight: 300;
color: orange;
margin-left: -222.5px;
font-size: 105px;
position: absolute;
top: 200px;
left: 50%;
}
View Compiled
var $orbs = $('.orbs span');
$('.end-right').css('left' , '-10%');
$('.end-left').css('left', '110%');
$orbs.velocity({'top': '-300px', scaleX: '.2', scaleY: '.2', color: '#990000'},0);
var orb = 0;
var numOrbs = $orbs.length;
$('.end-right').velocity({left : '50%'}, 'easeOutExpo', 1200);
$('.end-left').velocity({left : '50%'}, 'easeOutExpo', 1200);
dropOrbs = function(){
$orbs.eq(orb).velocity({top: '70px'}, 400).velocity({scaleX: 1, scaleY: 1, color: '#fff'}, 1000).css('position', 'relative');
orb = orb + 1;
if(orb < numOrbs){
setTimeout(dropOrbs, 100);
}
else{
setTimeout(function(){$('.glow').velocity({opacity: 1}, 1200);}, 1200);
}
}
setTimeout(dropOrbs, 400);
This Pen doesn't use any external CSS resources.