"Animated Lotus"
Bootstrap 3.1.0 Snippet by swapnilchafale

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div id="logo">
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div class="bloemblaadje noTransition"></div>
<div id="tagline" style=" font-size:60%; color:#666666;">Lotus- Swapnil Chafale</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
#logo {
position: relative;
margin: 0 auto;
background-color: rgb(230, 231, 232);
width: 900px;
height: 600px;
margin-top: 10px;
}
#tagline {
position: absolute;
bottom: 10px;
text-align: center;
width: 900px;
font-size:2em;
}
.bloemblaadje {
background: rgb(188,190,192);
background: -moz-linear-gradient(45deg, rgba(188,190,192,1) 8%, rgba(158,31,99,1) 30%, rgba(158,31,99,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(8%,rgba(188,190,192,1)), color-stop(30%,rgba(158,31,99,1)), color-stop(100%,rgba(158,31,99,1)));
background: -webkit-linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
background: -o-linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
background: -ms-linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcbec0', endColorstr='#9e1f63',GradientType=1 );
width: 300px;
height: 300px;
border-radius: 300px 0px ;
position: absolute;
top: 440px;
left: 150px;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 300px 0px;
-webkit-transition: -webkit-transform 4s ease-in-out;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
klapUit();
});
function klapUit() {
var angle = 45;
$("#logo").children(".bloemblaadje").each(function() {
$(this).removeClass('noTransition');
$(this).css({
'transform': 'rotate('+angle+'deg)',
'-moz-transform': 'rotate('+angle+'deg)',
'-o-transform': 'rotate('+angle+'deg)',
'-webkit-transform': 'rotate('+angle+'deg)'
});
angle += 25.8;
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard PRO React
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments: