"social icon animation"
Bootstrap 3.3.0 Snippet by evarevirus

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
<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>Social Icon Animation</h1>
<div id="socialicons">
<div class="socialicon">
<div class="dribbblecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-dribbble dribbble"></i>
</div>
</div>
<div class="socialicon">
<div class="facebookcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-facebook-square facebook"></i>
</div>
</div>
<div class="socialicon">
<div class="googlecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-google-plus-square google"></i>
</div>
</div>
<div class="socialicon">
<div class="flickrcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-flickr flickr"></i>
</div>
</div>
<div class="socialicon">
<div class="pinterestcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-pinterest-square pinterest"></i>
</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
body{
background:#f5f5f5;
}
h1
{
text-align:center;
color:#dbdbdb;
font-family:arial;
text-shadow:0px 2px 2px #c1c1c1;
}
#socialicons
{
width:75%;
margin:0 auto;
overflow:auto;
}
.socialicon
{
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
background:#e4e4e4;
position:relative;
float:left;
margin:0px 0px 10px 10px ;
}
.socialiconcircle1
{
width:150px;
height:150px;
position:absolute;
left:0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: