{% else-1 %}
Иконка переключения на «световых мечах» из Звездных войн

                        
<script>
$(".toggle-icon").click(function() {
$('#nav-container').toggleClass("pushed");
});


/*** starwars.com's Toggle Icon Animation ***/
</script>
<style>
body{
background:#222;
padding: 100px;
font-size: 10px; /*increase me to scale toogle-icon*/
}

#nav-container{
position: absolute;
top: 50%;
left: 50%;
margin:-3em;
}

/*toggle-icon*/
.toggle-icon {
display: block;
position: relative;
width: 100%;
margin: -2.2em auto 0 0.2em;
-webkit-transition: margin 600ms;
-moz-transition: margin 600ms;
transition: margin 600ms;
cursor: pointer;
}

.toggle-icon .bar {
display: block;
width: 3.8em;
height: 0.2em;
margin: 0.9em;
border-right: 2.8em solid #fff;
border-left: 0.6em solid #d6d6d6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
-moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
transition-property: transform, margin, border-right-color, box-shadow;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
transition-duration: 600ms;
}
.toggle-icon .bar:nth-of-type(1) {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
}
.toggle-icon .bar:nth-of-type(2) {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}

/*pushed*/
.pushed .toggle-icon {
margin: -3.2em 0 0 0.7em;
}

.pushed .bar:nth-of-type(1) {
opacity: 0;
}

.pushed .bar:nth-of-type(2) {
margin-left: 1.4em;
-webkit-transform: rotate(-137deg) translateY(-1.5em);
-moz-transform: rotate(-137deg) translateY(-1.5em);
-ms-transform: rotate(-137deg) translateY(-1.5em);
-o-transform: rotate(-137deg) translateY(-1.5em);
transform: rotate(-137deg) translateY(-1.5em);
}

.pushed .bar:nth-of-type(3) {
margin-left: 0.5em;
-webkit-transform: rotate(-42deg);
-moz-transform: rotate(-42deg);
-ms-transform: rotate(-42deg);
-o-transform: rotate(-42deg);
transform: rotate(-42deg);
}


.pushed .toggle-icon:hover .bar:nth-of-type(2) {
border-right-color: #e9b8b9;
box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) {
border-right-color: #ddf1da;
box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
}
</style>
<div id="nav-container">
<div class="toggle-icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div><!-- /toggle-icon -->
</div><!-- /nav-container -->
0 99 0
Без комментариев...