Иконки:
Нажмите на нужный гамбургер, чтобы увидеть анимацию и получить его код.
HTML:
|
1 2 3 4 5 |
<svg class="ham1" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" /> <path class="middle" d="m 30,50 h 40" /> <path class="bottom" d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.ham1 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham1 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham1.active { transform: rotate(45deg); } .ham1 .top { stroke-dasharray: 40 139; } .ham1 .bottom { stroke-dasharray: 40 180; } .ham1.active .top { stroke-dashoffset: -98px; } .ham1.active .bottom { stroke-dashoffset: -138px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham2" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 70,33 h -40 c -6.5909,0 -7.763966,-4.501509 -7.763966,-7.511428 0,-4.721448 3.376452,-9.583771 13.876919,-9.583771 14.786182,0 11.409257,14.896182 9.596449,21.970818 -1.812808,7.074636 -15.709402,12.124381 -15.709402,12.124381" /> <path class="middle" d="m 30,50 h 40" /> <path class="bottom" d="m 70,67 h -40 c -6.5909,0 -7.763966,4.501509 -7.763966,7.511428 0,4.721448 3.376452,9.583771 13.876919,9.583771 14.786182,0 11.409257,-14.896182 9.596449,-21.970818 -1.812808,-7.074636 -15.709402,-12.124381 -15.709402,-12.124381" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.ham2 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham2 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham2 .top { stroke-dasharray: 40 121; } .ham2 .bottom { stroke-dasharray: 40 121; } .ham2.active .top { stroke-dashoffset: -102px; } .ham2.active .bottom { stroke-dashoffset: -102px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham3" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 30,33 h 40 c 3.722839,0 7.5,3.126468 7.5,8.578427 0,5.451959 -2.727029,8.421573 -7.5,8.421573 h -20" /> <path class="middle" d="m 30,50 h 40" /> <path class="bottom" d="m 70,67 h -40 c 0,0 -7.5,-0.802118 -7.5,-8.365747 0,-7.563629 7.5,-8.634253 7.5,-8.634253 h 20" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.ham3 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham3 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham3.active { transform: rotate(45deg); } .ham3 .top { stroke-dasharray: 40 160; } .ham3 .middle { stroke-dasharray: 40 142; transform-origin: 50%; transition: transform 400ms; } .ham3 .bottom { stroke-dasharray: 40 85; transform-origin: 50%; transition: transform 400ms, stroke-dashoffset 400ms; } .ham3.active .top { stroke-dashoffset: -64px; } .ham3.active .middle { transform: rotate(90deg); } .ham3.active .bottom { stroke-dashoffset: -64px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham4" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" /> <path class="middle" d="m 70,50 h -40" /> <path class="bottom" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.ham4 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham4 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham4.active { transform: rotate(45deg); } .ham4 .top { stroke-dasharray: 40 121; } .ham4 .bottom { stroke-dasharray: 40 121; } .ham4.active .top { stroke-dashoffset: -68px; } .ham4.active .bottom { stroke-dashoffset: -68px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham5" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" /> <path class="middle" d="m 70,50 h -40" /> <path class="bottom" d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.ham5 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham5 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham5.active { transform: rotate(180deg); } .ham5 .top { stroke-dasharray: 40 82; } .ham5 .bottom { stroke-dasharray: 40 82; } .ham5.active .top { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } .ham5.active .bottom { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham6" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272" /> <path class="middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272" /> <path class="bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.ham6 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham6 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham6 .top { stroke-dasharray: 40 172; } .ham6 .middle { stroke-dasharray: 40 111; } .ham6 .bottom { stroke-dasharray: 40 172; } .ham6.active .top { stroke-dashoffset: -132px; } .ham6.active .middle { stroke-dashoffset: -71px; } .ham6.active .bottom { stroke-dashoffset: -132px; } |
HTML:
|
1 2 3 4 5 |
<svg class="ham7" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013" /> <path class="middle" d="m 70,50 h -40" /> <path class="bottom" d="m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40" /> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.ham7 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham7 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham7.active { transform: rotate(45deg); } .ham7 .top { stroke-dasharray: 40 82; } .ham7 .middle { stroke-dasharray: 40 111; } .ham7 .bottom { stroke-dasharray: 40 161; } .ham7.active .top { stroke-dasharray: 17 82; stroke-dashoffset: -62px; } .ham7.active .middle { stroke-dashoffset: 23px; } .ham7.active .bottom { stroke-dashoffset: -83px; } |
Пример реализации:
При клике на иконку у нее добавляется класс active. Это также можно использовать для вывода меню или другой информации.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="photo-block"> <img src="photo.jpg" alt="" /> <svg class="ham5" viewBox="0 0 100 100" width="80" onclick="this.classList.toggle('active')"> <path class="top" d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" /> <path class="middle" d="m 70,50 h -40" /> <path class="bottom" d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" /> </svg> <div class="menu-block-bg"></div> <div class="menu-block"> <ul> <li><a href="#punct">Пункт 1</a></li> <li><a href="#punct">Пункт 2</a></li> <li><a href="#punct">Пункт 3</a></li> <li><a href="#punct">Пункт 4</a></li> </ul> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
/* оформление иконки */ .ham5 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } .ham5 path{ fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #337AB7; stroke-width: 5.5; stroke-linecap: round; } .ham5.active { transform: rotate(180deg); } .ham5 .top { stroke-dasharray: 40 82; } .ham5 .bottom { stroke-dasharray: 40 82; } .ham5.active .top { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } .ham5.active .bottom { stroke-dasharray: 14 82; stroke-dashoffset: -72px; } /* стили блока */ .photo-block { position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; margin: 20px auto; max-width: 400px; } .photo-block img { width: 100%; } .photo-block .menu-block-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); transition: background 0.4s; z-index: 1; } .photo-block .menu-block { position: absolute; right: -100%; width: 100%; top: 50%; transform: translateY(-50%); z-index: 3; transition: right 0.4s; } .photo-block .menu-block ul { padding: 0; margin: 0; list-style: none; } .photo-block .menu-block ul li a { color: #FFF; font-size: 20px; font-weight: 600; padding: 10px; display: block; text-align: center; text-transform: uppercase; transition: background 0.3s; text-decoration: none; } .photo-block .menu-block ul li a:hover { background: rgba(0,0,0,0.5); } .photo-block .ham5 { position: absolute; right: 0; top: 0; z-index: 2; } .photo-block .ham5 path { stroke: #FFF; } .photo-block .ham5.active ~ .menu-block-bg { background: rgba(0,0,0,0.5); } .photo-block .ham5.active ~ .menu-block { right: 0; } |
Иконки найдены на codepen.io у пользователя Shark
Добавить комментарий: