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

                        
<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 -->