"Birthday Candle"
Bootstrap 3.3.0 Snippet by Opeyemi15

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>
Make a wish..<br/>.. and blow out the candle
</h1>
<div id="glow" class="glow"></div>
<div id="candle">
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div id="top">
<div class="smoke"></div>
<div class="smoke"></div>
<div class="smoke"></div>
<div id="knot"></div>
<div id="flame" class="burn"></div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Sacramento");
body {
background-color: #1e1934;
}
h1 {
position: fixed;
margin: 0 auto;
bottom: 5%;
left: 0;
right: 0;
width: 12em;
text-align: center;
font-size: 2em;
font-weight: 100;
font-family: 'Sacramento';
letter-spacing: .1em;
color: white;
text-shadow: 0 0 20px black;
opacity: .8;
}
#glow {
position: absolute;
left: calc(50% - .1em);
bottom: calc(35% + 9em);
width: .2em;
height: .2em;
border-radius: 100%;
opacity: .15;
}
#candle {
position: absolute;
left: calc(50% - .75em);
bottom: 35%;
width: 1.5em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
var flame = $('#flame');
var txt = $('h1');
flame.on({
click: function() {
flame.removeClass('burn').addClass('puff');
$('.smoke').each(function() {
$(this).addClass('puff-bubble');
});
$('#glow').remove();
txt.hide().html("It <b>will</b> come true..").delay(750).fadeOut(300);
$('#candle').animate({
'opacity': '.5'
}, 100);
}
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard

Questions / Comments: