<div class="wrapper">
<div class="icon">
<div class="first">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="second"></div>
<div class="last">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
/*
Inspired by https://dribbble.com/shots/1625088-Open-Close-Smash?list=searches&tag=animation&offset=183
P.S. Desktop Chrome Only
*/
body{
background-color: #F2276C;
}
.icon{
margin: 0 auto;
margin-top: 100px;
width: 50px;
height: 50px;
cursor: pointer;
position: relative;
user-select: none;
.first, .last{
width: 50px;
animation: scales 0.6s;
.left{
width: 50%;
height: 6px;
background: white;
display: inline-block;
margin-right: -4px;
border-radius: 5px 0 0 5px;
position: relative;
transition: all 0.2s;
}
.right{
width: 50%;
height: 6px;
background: white;
display: inline-block;
margin-right: -4px;
border-radius: 0 5px 5px 0;
position: relative;
transition: all 0.2s;
}
}
.second{
width: 50px;
height: 0px;
display: inline-block;
border: 3px solid white;
box-sizing: border-box;
border-radius: 5px;
animation: scales 0.5s;
}
}
.icon.active{
padding-top: 5px;
box-sizing: border-box;
.first{
animation: scales 0.5s;
.left{
transform: rotate(45deg) scale(1.2);
left: 4px;
top: 1px;
border-radius: 5px;
}
.right{
transform: rotate(-45deg) scale(1.2);
right: 4px;
top: 2px;
border-radius: 5px;
}
}
.second{
border: 5px solid white;
width: auto;
height: auto;
position: absolute;
top:-14px;
bottom: -16px;
left: -15px;
right: -15px;
border-radius: 50%;
animation: circle 0.5s;
}
.last{
animation: scales 0.5s;
.left{
transform: rotate(-45deg) scale(1.2);
left: 4px;
top: 2px;
border-radius: 5px;
}
.right{
transform: rotate(45deg) scale(1.2);
right: 4px;
top: 1px;
border-radius: 5px;
}
}
}
@keyframes circle {
0%{
opacity: 0;
transform: scale(0);
}
60%{
opacity: 1;
transform: scale(1.1);
}
70%{
transform: scale(1);
}
100%{
opacity: 1;
transform: scale(1)
}
}
@keyframes scales {
0%{
transform: scale(0.3)
}
30%{
transform: scale(1.2)
}
60%{
transform: scale(0.9)
}
100%{
transform: scale(1)
}
}
xxxxxxxxxx
$('.icon').click(function(){
$(this).toggleClass('active');
});
$.