"When you want to use social media buttons, you use animation to multiply the attractiveness of these buttons, as in the following code, where there is initially a circular button with a hamburger menu icon, when we click on this icon, this icon It rotates and its icon becomes a close icon, and the social media buttons are formed in a semicircle below it. This animation is especially useful in View Mobile, which has a small space."
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrapper">
<div id="hammy" class="hamburger">
<div id="bubble1" class="bubble">
<a>
<i class="fa fa-facebook fa-4x"></i>
</a>
</div>
<div id="bubble2" class="bubble">
<a>
<i class="fa fa-twitter fa-4x"></i>
</a>
</div>
<div id="bubble3" class="bubble">
<a>
<i class="fa fa-google-plus fa-4x"></i>
</a>
</div>
<div id="bubble4" class="bubble">
<a>
<i class="fa fa-codepen fa-4x"></i>
</a>
</div>
<div id="cont" class="cont">
<div class="line" id="line1">
</div>
<div class="line" id="line2">
</div>
<div class="line" id="line3">
</div>
</div>
</div>
<div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
body {
background: linear-gradient( 45deg, #d7e201, #ff01017a);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
}
.wrapper .hamburger {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 50px auto;
text-align: center;
line-height: 100px;
cursor: pointer;
z-index: 2;
position: relative;
}
.wrapper .cont {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: #3BB878;
}
.wrapper .line {
width: 75px;
height: 10px;
border-radius: 5px;
background: #464646;
margin: 10px auto;
z-index: 2;
position: relative;
transition: all 0.4s linear 0.2s !important;
top: 22px;
}
.wrapper .spin {
animation: spin 0.5s ease-in-out;
}
.wrapper .unspin {
animation: spin 0.5s ease-in-out;
animation-direction: reverse;
}
.wrapper #bubble1, .wrapper #bubble2, .wrapper #bubble3, .wrapper #bubble4 {
width: 80px;
height: 80px;
margin: 0 auto;
opacity: 1;
position: absolute;
left: 5px;
transition: all 0.2s ease 0s;
border-radius: 50%;
line-height: 120px;
}
.wrapper #bubble1 {
top: 16px;
}
.wrapper #bubble2 {
top: 16px;
}
.wrapper #bubble3 {
top: 16px;
}
.wrapper #bubble4 {
top: 16px;
}
.out1, .out2, .out3, .out4 {
color: #fff !important;
transition: all 0.4s linear 0.1s !important;
}
.out1 {
left: 125px !important;
top: 40px !important;
background: #3B5998;
}
.out2 {
left: 55px !important;
top: 120px !important;
background: #55acee;
}
.out3 {
left: -45px !important;
top: 120px !important;
background: #dd4b39;
}
.out4 {
left: -115px !important;
top: 40px !important;
background: #4d4d4d;
line-height: 110px !important;
}
.cross1, .cross3 {
background: #fff !important;
}
.cross2 {
opacity: 0 !important;
}
.cross1 {
top: 42px !important;
transform: rotate(45deg);
}
.cross3 {
top: 2px !important;
transform: rotate(-45deg);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
var hammy = $("#hammy");
var bub1 = $("#bubble1");
var bub2 = $("#bubble2");
var bub3 = $("#bubble3");
var bub4 = $("#bubble4");
var spun = false;
$('#cont').click(function () {
if (spun == false) {
spin();
} else {
unspin();
}
});
$('#cont').focus(function () {
if (spun == false) {
spin();
} else {
unspin();
}
});
var spin = function () {
spun = true;
$(hammy).removeClass("unspin").addClass("spin");
bubblesout();
makecross();
setTimeout(function () {
$(hammy).removeClass("spin");
}, 500);
}
var unspin = function () {
spun = false;
$(hammy).removeClass("spin").addClass("unspin");
bubblesin();
destroycross();
setTimeout(function () {
$(hammy).removeClass("unspin");
}, 500);
}
var bubblesout = function () {
var i = 1;
$(".bubble").each(function () {
$(this).addClass("out" + i);
i++;
});
}
var bubblesin = function () {
var i = 1;
$(".bubble").each(function () {
$(this).removeClass("out" + i);
i++;
});
}
var makecross = function () {
var i = 1;
$(".line").each(function () {
$(this).addClass("cross" + i);
i++;
});
}
var destroycross = function () {
var i = 1;
$(".line").each(function () {
$(this).removeClass("cross" + i);
i++;
})
}