Анимация иконок меню


CROSS 1



CROSS 3



CROSS 2



Исполняемый код:

<!-- ☬ ║ CROSS 1 ║ ☬ --> <h2 style="width:100%; margin:20px 0;">CROSS 1</h2><hr /><br /> <details class="nav_rullan"> <summary> <u class="cross_rull"><s></s><s></s><s></s></u> </summary> <nav> <p>Пункт 1</p> <p>Пункт 2</p> <p>Пункт 3</p> <p>Пункт 4</p> </nav> </details> <!-- ☬ ║ CROSS 3 ║ ☬ --> <h2 style="width:100%; margin:20px 0;">CROSS 3</h2><hr /><br /> <details class="nav_rullan3"> <summary> <s></s> </summary> <nav> <p>Пункт 1</p> <p>Пункт 2</p> <p>Пункт 3</p> <p>Пункт 4</p> </nav> </details> <!-- ☬ ║ CROSS 2 ║ ☬ --> <h2 style="width:100%; margin:20px 0;">CROSS 2</h2><hr /><br /> <details class="nav_rullan2"> <summary> <u class="cross_rull2"><s></s><s></s><s></s><s></s></u> </summary> <nav> <p>Пункт 1</p> <p>Пункт 2</p> <p>Пункт 3</p> <p>Пункт 4</p> </nav> </details> <style> /* CROSS 2 */ .cross_rull2 {position: relative; display:block; width: 30px; height: 30px; margin: 30px auto; text-decoration:none;font-style:normal;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer;} .cross_rull2 s {background: #000; height: 1px;width: 100%; display: block;text-decoration:none;font-style:normal; position: absolute; left: 0; opacity: 1; transform: rotate(0deg); transition: .25s ease-in-out;} .nav_rullan2 summary {display:block; overflow:hidden;} .nav_rullan2 summary::-webkit-details-marker {display:none;} .cross_rull2 s:nth-child(1) {top: 0px;} .cross_rull2 s:nth-child(2), cross_rull2 s:nth-child(3) {top: 9px;} .cross_rull2 s:nth-child(4) {top: 18px;} .nav_rullan2[open] > summary .cross_rull2 s:nth-child(1) {width: 0%; left: 50%;} .nav_rullan2[open] > summary .cross_rull2 s:nth-child(2) {transform: rotate(45deg);} .nav_rullan2[open] > summary .cross_rull2 s:nth-child(3) {transform: rotate(-45deg);top: 8px;} .nav_rullan2[open] > summary .cross_rull2 s:nth-child(4) {width: 0%; left: 50%;} /* CROSS 1 */ .cross_rull {position: relative; display:block; width: 30px; height: 30px; margin: 30px auto; text-decoration:none;font-style:normal;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer;} .cross_rull s {background: #000; height: 1px;width: 100%; display: block;text-decoration:none;font-style:normal; position: absolute; left: 0; opacity: 1; transform: rotate(0deg); transition: .25s ease-in-out;} .nav_rullan summary {display:block; overflow:hidden;} .nav_rullan summary::-webkit-details-marker {display:none;} .cross_rull s:nth-child(1) {top: 0px;} .cross_rull s:nth-child(2) {top: 8px;} .cross_rull s:nth-child(3) {top: 16px;} .nav_rullan[open] > summary .cross_rull s:nth-child(1) {top: 8px;transform: rotate(135deg);} .nav_rullan[open] > summary .cross_rull s:nth-child(2) {opacity: 0;left: -40px;} .nav_rullan[open] > summary .cross_rull s:nth-child(3) {top: 8px; transform: rotate(-135deg);} /* CROSS 6 */ .nav_rullan3 {width: 30px; height: 30px; position: relative; transition-duration: 1s; margin: 30px auto; cursor: pointer;} .nav_rullan3 summary {display:block; width: 30px; height: 30px; overflow:hidden;} .nav_rullan3 summary::-webkit-details-marker {display:none;} .nav_rullan3 s, .nav_rullan3 s:before, .nav_rullan3 s:after {height: 1px; width: 30px; background-color: #000; position: absolute; transition-duration: .25s; transition-delay: .25s;} .nav_rullan3 s:before {left: 0; top: -10px; content: ""; } .nav_rullan3 s:after {left: 0; top: 10px; content: ""; } .nav_rullan3[open] > summary s {transition-duration: 0.1s; transition-delay: .25s; background: transparent;} .nav_rullan3[open] > summary s:before {transition: top .25s, transform .25s .25s; top: 0px; transform: rotateZ(-45deg);} .nav_rullan3[open] > summary s:after {transition: top 0.4s, transform .25s .25s; top: 0px; transform: rotateZ(45deg);} </style>