بخش مقالات آکادمی | Articles
آخرین آموزش ها

چند منوی همبرگری خوشمزه با CSS

منو همبرگری در درجه اول باعث ناوبری کشویی که پیوندهایی به صفحات مختلف در سراسر وب سایت است را شامل می شود. منو های کشویی و ناوبری کشویی عالی برای طراحی واکنش گرا هستند، اما آنها می توان با مهارت زیاد و خلاقیت پیاده سازی کرد به طوری که جدید و جذاب برای کاربر باشد. اگر شما هم به دنبال راه های جدیدی برای تحرک بخشیدن و زنده کردن طراحی خود هستید مثلا در بخشی سه خط که نشان دهنده منو همبرگری است بعد از باز شدن منو به شکل X تبدیل شود و از این قبیل طراحی ها با ما همراه باشید در چند منوی همبرگری خوشمزه با CSS تا  نمایشگاهی از خلاقیت ها با CSS و ایجاد انیمیشن ها منوی همبرگری خارق العاده را به شما نمایش دهیم.

hamburger menu

1-Hamburger-Menu-Icon  چند منوی همبرگری خوشمزه با CSS top header image1

منو همبرگری که نمادی متشکل از سه خط افقی موازی ( نمایش داده می شود به صورت ≡ ) دارد که به عنوان یک دکمه در رابط های گرافیکی کاربری استفاده می شود. این منو ها که اغلب در سمت بالایی راست یا سمت بالایی چپ از یک رابط کاربری نمایش داده شود. این منوها را یک “ منوی همبرگری “ به دلیل شباهت آن ها به یک همبرگر می نامند.

از یک منوی همبرگری معمولا در صفحات وب و یا برای ایجاد گزینه ها یا پیوند ها در اپلیکیشن ها استفاده می شود. آیکون این منو را نورم کاکس به عنوان بخشی از رابط کاربری برای زیراکس استار (  Xerox Star ) که یک رایانه شخصی عرضه شده در   1981 ، طراحی کرده بود.

ما در اینجا کد های مربوط به انیمیشن های این منوها را در اختیار شما قرار می دهیم و شما می توانید با استفاده از سایت codepen.io کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.

1. منو همبرگر ( با پنیر )

css-hamburger-menu-1  چند منوی همبرگری خوشمزه با CSS css hamburger menu 1

این همبرگر دلیل نام گذاری این منو را نشان می دهد. شما با کلیک بر روی این همبرگر تمام اجزای این همبرگر نمایش داده می شود.

برای مشاهده این منو اینجا را کلیک کنید.

کد HTML

<body>

<h1>Hamburger Menu <span>(with cheese)</span></h1>

<h2>Click the hamburger to toggle menu</h2>

<div class=”wrapper”>

<ul class=”hamburger”>

<li class=”item” id=”bun_top”>

<a class=”link” href=”$”>Top Bun</a>

<svg class=”svg” width=”139px” height=”58px” viewBox=”0 0 139 58″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-1.000000, 0.000000)”>

<path d=”M134.4,53.6 C110.85,59.25 20.55,56.95 6.55,53.6 C-2.25,51.5 2.95,23.45 8.95,17.45 C31.55,-5.15 114.3,-5.25 134.35,19.6 C139.75,26.2 142.7,51.65 134.4,53.6 L134.4,53.6 Z” id=”Shape” fill=”#F49B2F” sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(24.002450, 9.498350) rotate(-11.204304) translate(-24.002450, -9.498350) ” cx=”24.00245″ cy=”9.49835″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(36.046100, 5.847250) rotate(-11.204304) translate(-36.046100, -5.847250) ” cx=”36.0461″ cy=”5.84725″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(53.050595, 9.495435) rotate(-11.204304) translate(-53.050595, -9.495435) ” cx=”53.050595″ cy=”9.495435″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(63.294125, 5.839575) rotate(-11.204304) translate(-63.294125, -5.839575) ” cx=”63.294125″ cy=”5.839575″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(70.702830, 9.498910) rotate(-0.870916) translate(-70.702830, -9.498910) ” cx=”70.70283″ cy=”9.49891″ rx=”3.05004735″ ry=”1.75002717″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(75.257400, 2.500250) rotate(11.011040) translate(-75.257400, -2.500250) ” cx=”75.2574″ cy=”2.50025″ rx=”3.05002983″ ry=”1.75001711″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(54.792070, 2.499110) rotate(-11.204304) translate(-54.792070, -2.499110) ” cx=”54.79207″ cy=”2.49911″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(84.294520, 11.298340) rotate(12.280840) translate(-84.294520, -11.298340) ” cx=”84.29452″ cy=”11.29834″ rx=”3.04994769″ ry=”1.74996999″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(87.304270, 2.498950) rotate(-0.916746) translate(-87.304270, -2.498950) ” cx=”87.30427″ cy=”2.49895″ rx=”3.05008541″ ry=”1.75004901″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(69.293440, 14.895420) rotate(-11.204304) translate(-69.293440, -14.895420) ” cx=”69.29344″ cy=”14.89542″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(50.041855, 16.692815) rotate(-11.204304) translate(-50.041855, -16.692815) ” cx=”50.041855″ cy=”16.692815″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(30.042855, 16.694815) rotate(-11.204304) translate(-30.042855, -16.694815) ” cx=”30.042855″ cy=”16.694815″ rx=”3.04987388″ ry=”1.74992764″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(42.098060, 13.096580) rotate(-33.257823) translate(-42.098060, -13.096580) ” cx=”42.09806″ cy=”13.09658″ rx=”3.04995882″ ry=”1.74997637″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(93.359340, 16.700005) rotate(8.041784) translate(-93.359340, -16.700005) ” cx=”93.35934″ cy=”16.700005″ rx=”3.05010377″ ry=”1.75005954″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(100.650780, 4.054410) rotate(13.126025) translate(-100.650780, -4.054410) ” cx=”100.65078″ cy=”4.05441″ rx=”3.05008482″ ry=”1.75004867″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(103.653455, 13.101835) rotate(-8.551447) translate(-103.653455, -13.101835) ” cx=”103.653455″ cy=”13.101835″ rx=”3.05005322″ ry=”1.75003054″></ellipse>

<ellipse id=”Oval” fill=”#F4D658″ sketch:type=”MSShapeGroup” transform=”translate(114.707825, 7.637975) rotate(19.591001) translate(-114.707825, -7.637975) ” cx=”114.707825″ cy=”7.637975″ rx=”3.04996721″ ry=”1.74998119″></ellipse>

</g>

</g>

</svg>

</li>

<li class=”item” id=”tomato”>

<a class=”link” href=”$”>Tomatoes</a>

<svg width=”140px” height=”32px” viewBox=”0 0 140 32″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-1.000000, -7.000000)”>

<path d=”M140.3,31.75 C139.15,38.15 119.3,39.95 95.9,35.8 C72.5,31.65 54.5,23.1 55.65,16.7 C55.85,15.65 56.4,12.75 57.6,11.9 C63.4,7.9 80.6,9.15 100.05,12.6 C119.85,16.15 136.75,21.05 140.45,26.9 C141.05,27.95 140.45,30.75 140.3,31.75 L140.3,31.75 Z”

  id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(98.551830, 21.202770) rotate(10.078342) translate(-98.551830, -21.202770) ” cx=”98.55183″ cy=”21.20277″ rx=”43.0013364″ ry=”11.8003667″></ellipse>

<path d=”M117.45,31.8 C112.7,31.9 103.45,26.65 97.8,25.7 C92.1,24.75 81.65,26.7 77.2,25.1 C72.75,23.45 83.55,21.6 82,19.9 C80.5,18.2 64.4,14.15 66.4,13.05 C68.4,11.95 84.3,16.05 89.1,15.95 C93.8,15.85 94.3,11.35 100,12.3 C105.7,13.25 104.75,17.65 109.2,19.3 C113.65,20.95 130.05,22.2 131.55,23.95 C133.05,25.65 116.55,24.25 114.55,25.35 C112.55,26.45 122.15,31.7 117.45,31.8 L117.45,31.8 Z”

  id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(96.851240, 18.903260) rotate(10.136758) translate(-96.851240, -18.903260) ” cx=”96.85124″ cy=”18.90326″ rx=”1.30001258″ ry=”0.650006292″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(101.304960, 19.706940) rotate(10.049134) translate(-101.304960, -19.706940) ” cx=”101.30496″ cy=”19.70694″ rx=”1.30005482″ ry=”0.65002741″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(101.044890, 22.247370) rotate(9.986073) translate(-101.044890, -22.247370) ” cx=”101.04489″ cy=”22.24737″ rx=”1.29993409″ ry=”0.649967044″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(96.401845, 21.447835) rotate(10.037851) translate(-96.401845, -21.447835) ” cx=”96.401845″ cy=”21.447835″ rx=”1.30000948″ ry=”0.650004738″></ellipse>

<path d=”M87.1,22.85 C87.2,29.35 68.05,34.9 44.3,35.3 C20.55,35.65 1.25,30.7 1.15,24.2 C1.15,23.1 1.15,20.15 2.15,19.15 C7.1,14.1 24.2,12.1 44,11.8 C64.15,11.5 81.6,13.1 86.35,18.15 C87.15,19 87.05,21.9 87.1,22.85 L87.1,22.85 Z” id=”Shape” fill=”#E83F40″

  sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” transform=”translate(44.099475, 20.454725) rotate(-0.876645) translate(-44.099475, -20.454725) ” cx=”44.099475″ cy=”20.454725″ rx=”43.0007331″ ry=”11.7502003″></ellipse>

<path d=”M64.65,27.3 C60,28.3 49.95,24.9 44.2,25.05 C38.45,25.2 28.55,29.1 23.85,28.35 C19.15,27.6 29.4,23.7 27.6,22.35 C25.8,20.95 9.25,20.05 11,18.6 C12.75,17.1 29.15,18.15 33.8,17.15 C38.45,16.15 38.1,11.65 43.85,11.5 C49.6,11.35 49.5,15.85 54.2,16.6 C58.9,17.35 75.2,15.5 77.05,16.9 C78.85,18.3 62.4,20.05 60.65,21.5 C58.85,22.95 69.3,26.3 64.65,27.3 L64.65,27.3 Z”

  id=”Shape” fill=”#E83F40″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” cx=”42″ cy=”18.55″ rx=”1.3″ ry=”0.65″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” cx=”46.5″ cy=”18.45″ rx=”1.3″ ry=”0.65″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” cx=”46.75″ cy=”21.05″ rx=”1.3″ ry=”0.65″></ellipse>

<ellipse id=”Oval” fill=”#EA5659″ sketch:type=”MSShapeGroup” cx=”42.05″ cy=”21.1″ rx=”1.3″ ry=”0.65″></ellipse>

</g>

</g>

</svg>

</li>

<li class=”item” id=”lettuce”>

<a class=”link” href=”$”>Lettuce</a>

<svg width=”162px” height=”37px” viewBox=”0 0 162 37″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup”>

<path d=”M142.3,27.3 L109.9,35.4 L50.1,28.35 L43.2,36.65 L9.4,32.9 L9.4,19.15 L18.8,14.15 L117.8,16.2 L125.85,22.6 L142.3,27.3 Z” id=”Shape” fill=”#518735″ sketch:type=”MSShapeGroup”></path>

<path d=”M161.2,28.2 L143,30.7 L96.25,23.7 L34,31.95 L0.25,28.2 L0.25,14.45 L16.15,9.45 L157.4,11.5 L158.95,17.9 L161.2,28.2 Z” id=”Shape” fill=”#56A234″ sketch:type=”MSShapeGroup”></path>

<path d=”M161.2,19.45 L143,21.95 L96.25,14.95 L34,23.2 L0.25,19.45 L0.25,5.7 L16.15,0.7 L157.4,2.75 L158.95,9.15 L161.2,19.45 Z” id=”Shape” fill=”#7CBB52″ sketch:type=”MSShapeGroup”></path>

</g>

</g>

</svg>

</li>

<li class=”item” id=”pickle”>

<a class=”link” href=”$”>Gerkins</a>

<svg width=”114px” height=”31px” viewBox=”0 0 114 31″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-1.000000, -2.000000)”>

<path d=”M45.15,28.95 C41.65,30.6 33.65,30.6 29.1,31.15 C24.55,31.7 16.85,33.55 13.05,32.75 C9.25,31.95 8.8,28.4 7.15,26.55 C5.5,24.7 2.3,21.9 1.45,19.7 C-0.9,13.55 8.95,16.15 12.45,14.5 C16,12.85 21.85,8.25 26.35,7.9 C30.9,7.55 36.4,9.2 40.25,10 C44.05,10.8 54.95,6.5 53.35,13.6 C52.8,16 50.25,19 49.1,21.2 C47.95,23.35 48.65,27.3 45.15,28.95 L45.15,28.95 Z”

  id=”Shape” fill=”#6C844A” sketch:type=”MSShapeGroup”></path>

<path d=”M44.85,25.85 C41.35,27.5 33.35,27.5 28.8,28.05 C24.25,28.6 16.55,30.45 12.75,29.65 C8.95,28.85 8.5,25.3 6.85,23.45 C5.2,21.6 0.35,18.8 1.15,16.6 C2,14.45 8.65,13.05 12.15,11.4 C15.7,9.75 21.55,5.15 26.05,4.8 C30.6,4.45 36.1,6.1 39.95,6.9 C43.75,7.7 51.45,8.65 53.05,10.5 C54.7,12.35 49.95,15.9 48.8,18.1 C47.65,20.2 48.35,24.2 44.85,25.85 L44.85,25.85 Z”

  id=”Shape” fill=”#9EA555″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(23.441545, 14.899615) rotate(-5.411269) translate(-23.441545, -14.899615) ” cx=”23.441545″ cy=”14.899615″ rx=”1.64992801″ ry=”0.899960732″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(30.150820, 14.299040) rotate(-5.370800) translate(-30.150820, -14.299040) ” cx=”30.15082″ cy=”14.29904″ rx=”1.64998376″ ry=”0.899991144″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(30.556310, 18.150830) rotate(-5.405025) translate(-30.556310, -18.150830) ” cx=”30.55631″ cy=”18.15083″ rx=”1.65007672″ ry=”0.900041849″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(23.853860, 18.790805) rotate(-5.365095) translate(-23.853860, -18.790805) ” cx=”23.85386″ cy=”18.790805″ rx=”1.64996833″ ry=”0.899982724″></ellipse>

<path d=”M102.3,30.65 C98.45,31.3 90.75,29.2 86.25,28.45 C81.75,27.75 73.8,27.5 70.35,25.7 C66.9,23.9 67.4,20.35 66.35,18.15 C65.25,15.95 62.9,12.35 62.7,10.05 C62.1,3.5 70.85,8.65 74.7,7.95 C78.55,7.3 85.4,4.45 89.9,5.3 C94.35,6.15 99.25,9.25 102.7,11.05 C106.15,12.85 117.8,11.6 114.35,18.05 C113.2,20.25 109.9,22.45 108.2,24.2 C106.5,26 106.1,30 102.3,30.65 L102.3,30.65 Z”

  id=”Shape” fill=”#6C844A” sketch:type=”MSShapeGroup”></path>

<path d=”M102.8,27.6 C98.95,28.25 91.25,26.1 86.75,25.4 C82.25,24.7 74.3,24.45 70.85,22.65 C67.4,20.85 67.9,17.35 66.85,15.1 C65.75,12.9 61.8,8.85 63.2,7 C64.6,5.15 71.35,5.6 75.2,4.9 C79.05,4.25 85.9,1.4 90.4,2.25 C94.85,3.1 99.75,6.2 103.2,8 C106.65,9.8 113.8,12.75 114.85,15 C115.95,17.2 110.4,19.4 108.7,21.15 C107.05,22.9 106.65,26.9 102.8,27.6 L102.8,27.6 Z”

  id=”Shape” fill=”#9EA555″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(85.144115, 11.340385) rotate(10.050134) translate(-85.144115, -11.340385) ” cx=”85.144115″ cy=”11.340385″ rx=”1.64990711″ ry=”0.899949333″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(91.757450, 12.502675) rotate(10.142398) translate(-91.757450, -12.502675) ” cx=”91.75745″ cy=”12.502675″ rx=”1.65004502″ ry=”0.900024556″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(91.102605, 16.357650) rotate(10.142398) translate(-91.102605, -16.357650) ” cx=”91.102605″ cy=”16.35765″ rx=”1.65004502″ ry=”0.900024556″></ellipse>

<ellipse id=”Oval” fill=”#B9C16A” sketch:type=”MSShapeGroup” transform=”translate(84.447760, 15.139870) rotate(10.084986) translate(-84.447760, -15.139870) ” cx=”84.44776″ cy=”15.13987″ rx=”1.64991771″ ry=”0.899955116″></ellipse>

</g>

</g>

</svg>

</li>

<li class=”item” id=”cheese”>

<a class=”link” href=”$”>Cheese</a>

<svg width=”151px” height=”44px” viewBox=”0 0 151 44″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-1.000000, 0.000000)”>

<path d=”M146.85,21 C130.85,22.15 99.5,27.8 48.1,43.4 C36.75,46.85 -5.5,21.1 3.1,14.25 C24.5,-2.85 103.1,6.3 103.1,6.3 C103.1,6.3 170.35,19.35 146.85,21 L146.85,21 Z” id=”Shape” fill=”#FDD181″ sketch:type=”MSShapeGroup”></path>

<path d=”M147.6,20.35 C131.5,20.35 99.5,24.6 48.1,40.2 C36.75,43.65 -0.8,19.25 3.35,13.75 C19.85,-8.05 103.1,3.05 103.1,3.05 C103.1,3.05 169.2,20.35 147.6,20.35 L147.6,20.35 Z” id=”Shape” fill=”#FDC64B” sketch:type=”MSShapeGroup”></path>

</g>

</g>

</svg>

</li>

<li class=”item” id=”bacon”>

<a class=”link” href=”$”>Bacon</a>

<svg width=”128px” height=”37px” viewBox=”0 0 128 37″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(0.000000, -3.000000)”>

<path d=”M123.9,35.85 C120.35,37.95 101.9,37.9 97.2,37.45 C89.8,36.7 76.25,29.85 68.85,29.1 C59.7,28.15 44.6,29.05 35.45,28.15 C29.35,27.55 11.3,26.3 7.3,22.7 C4.85,20.45 5.3,13.1 8.4,11.65 C13.3,9.35 30.75,14.75 36.7,15.35 C45.95,16.3 60.95,14.75 70.2,15.65 C77.45,16.35 91.5,21.3 98.75,22 C103.65,22.5 120.9,20.2 124.5,22.85 C127.25,24.9 126.8,34.15 123.9,35.85 L123.9,35.85 Z”

  id=”Shape” fill=”#894647″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.25,32.35 C120.7,34.45 102.25,34.4 97.55,33.95 C90.15,33.2 76.55,26.35 69.2,25.6 C60.05,24.7 44.95,25.6 35.8,24.65 C29.7,24.05 11.65,22.8 7.65,19.2 C5.2,17 5.65,9.6 8.75,8.15 C13.65,5.85 31.1,11.25 37.05,11.9 C46.3,12.85 61.3,11.25 70.55,12.2 C77.8,12.9 91.85,17.85 99.1,18.55 C104,19.05 121.25,16.75 124.85,19.4 C127.6,21.45 127.15,30.65 124.25,32.35 L124.25,32.35 Z”

  id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.55,29.55 C121,31.65 102.55,31.65 97.85,31.15 C90.45,30.4 76.9,23.55 69.5,22.8 C60.35,21.9 45.25,22.75 36.1,21.85 C30,21.25 11.95,20 7.95,16.4 C5.5,14.2 5.95,6.8 9.05,5.35 C13.95,3.05 31.4,8.45 37.35,9.05 C46.6,10 61.6,8.4 70.85,9.35 C78.1,10.1 92.15,15 99.4,15.7 C104.3,16.2 121.55,13.9 125.15,16.6 C127.9,18.65 127.4,27.85 124.55,29.55 L124.55,29.55 Z”

  id=”Shape” fill=”#894647″ sketch:type=”MSShapeGroup”></path>

<path d=”M124.8,27.1 C121.3,28.8 102.85,28.5 98.15,28 C90.75,27.25 77.1,21.3 69.7,20.55 C60.55,19.65 45.5,20.1 36.35,19.2 C30.25,18.6 12.2,17.25 8.15,14.2 C5.65,12.3 6,6.15 9.1,4.95 C13.95,3.15 31.5,7.95 37.45,8.55 C46.7,9.5 61.65,8.45 70.9,9.35 C78.15,10.1 92.3,14.45 99.5,15.15 C104.4,15.65 121.6,14 125.2,16.3 C127.95,18 127.65,25.75 124.8,27.1 L124.8,27.1 Z”

  id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M121.35,22.9 C118.4,25.8 100.55,30.35 95.85,31.05 C88.5,32.15 73.65,28.85 66.3,29.95 C57.2,31.3 42.8,35.9 33.7,37.25 C27.65,38.15 9.85,41.4 5.1,38.9 C2.15,37.35 0.8,30.1 3.45,27.9 C7.65,24.45 25.9,25.4 31.8,24.5 C41,23.15 55.15,17.9 64.3,16.55 C71.5,15.45 86.35,16.75 93.55,15.7 C98.45,14.95 114.6,8.5 118.7,10.2 C121.9,11.5 123.7,20.6 121.35,22.9 L121.35,22.9 Z”

  id=”Shape” fill=”#894647″ sketch:type=”MSShapeGroup”></path>

<path d=”M120.8,19.5 C117.85,22.4 100,26.95 95.3,27.65 C87.95,28.75 73.1,25.45 65.75,26.55 C56.65,27.9 42.25,32.5 33.15,33.85 C27.1,34.75 9.3,38 4.55,35.5 C1.6,33.95 0.25,26.65 2.9,24.5 C7.1,21.1 25.35,22 31.25,21.15 C40.45,19.75 54.6,14.55 63.8,13.15 C71,12.05 85.85,13.35 93.05,12.3 C97.95,11.55 114.1,5.1 118.2,6.8 C121.35,8.05 123.15,17.1 120.8,19.5 L120.8,19.5 Z”

  id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

<path d=”M120.4,16.65 C117.45,19.55 99.6,24.1 94.9,24.8 C87.55,25.9 72.7,22.6 65.35,23.7 C56.25,25.05 41.85,29.65 32.75,31.05 C26.7,31.95 8.9,35.2 4.15,32.7 C1.2,31.15 -0.15,23.9 2.5,21.75 C6.7,18.35 24.95,19.25 30.85,18.35 C40,16.95 54.2,11.75 63.35,10.4 C70.55,9.3 85.4,10.6 92.6,9.55 C97.5,8.8 113.65,2.35 117.8,4.05 C120.95,5.25 122.75,14.35 120.4,16.65 L120.4,16.65 Z”

  id=”Shape” fill=”#894647″ sketch:type=”MSShapeGroup”></path>

<path d=”M120,14.25 C117,16.8 99.05,21 94.4,21.7 C87.05,22.8 72.35,20.4 65,21.5 C55.9,22.85 41.45,27.05 32.35,28.45 C26.3,29.35 8.45,32.55 3.8,30.55 C0.9,29.3 -0.25,23.25 2.4,21.35 C6.65,18.4 24.85,18.75 30.75,17.85 C39.9,16.45 54.15,11.75 63.35,10.4 C70.55,9.35 85.3,10.05 92.5,8.95 C97.4,8.2 113.65,2.4 117.7,3.7 C120.85,4.65 122.45,12.2 120,14.25 L120,14.25 Z”

  id=”Shape” fill=”#AA7272″ sketch:type=”MSShapeGroup”></path>

</g>

</g>

</svg>

</li>

<li class=”item” id=”burger”>

<a class=”link” href=”$”>Burger</a>

<svg width=”139px” height=”46px” viewBox=”0 0 139 46″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-2.000000, -3.000000)”>

<path d=”M140.25,27.2 C140.45,36.65 132.95,44.4 123.5,44.6 C123.5,44.6 101,48.15 73.2,48.65 C44.75,49.2 20,46.55 20,46.55 C10.55,46.75 2.8,39.25 2.6,29.8 L2.6,29.8 C2.4,20.35 2.65,12.7 12.05,12.55 C12.05,12.55 31.95,18.45 71.2,17.7 C113.65,16.9 130.3,10.35 130.3,10.35 C139.75,10.15 140.1,17.8 140.25,27.2 L140.25,27.2 L140.25,27.2 Z”

  id=”Shape” fill=”#6D4B33″ sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#774C32″ sketch:type=”MSShapeGroup” transform=”translate(71.150860, 13.093145) rotate(-1.082978) translate(-71.150860, -13.093145) ” cx=”71.15086″ cy=”13.093145″ rx=”65.0986085″ ry=”9.99978625″></ellipse>

</g>

</g>

</svg>

</li>

<li class=”item” id=”bun_bottom”>

<a class=”link” href=”$”>Bottom Bun</a>

<svg width=”137px” height=”42px” viewBox=”0 0 137 42″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns”>

<g id=”Page-1″ stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>

<g sketch:type=”MSLayerGroup” transform=”translate(-2.000000, -4.000000)”>

<path d=”M138.9,25.75 C138.9,34.9 134.2,42.3 128.4,42.3 C128.4,42.3 93.35,45.8 72.35,45.8 C48.65,45.8 13.1,42.3 13.1,42.3 C7.3,42.3 2.6,34.9 2.6,25.75 L2.6,25.75 C2.6,16.6 7.3,9.25 13.1,9.25 L128.4,9.25 C134.15,9.2 138.9,16.6 138.9,25.75 L138.9,25.75 L138.9,25.75 Z”

  id=”Shape” fill=”#F49B2F” sketch:type=”MSShapeGroup”></path>

<ellipse id=”Oval” fill=”#EFBA43″ sketch:type=”MSShapeGroup” cx=”70.65″ cy=”13.4″ rx=”65.85″ ry=”9.05″></ellipse>

</g>

</g>

</svg>

</li>

<li class=”item shadow”></li>

</ul>

</div>

</body>

کد CSS

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);

html {

  background: #f2f2f2;

}

body {

  font-family: “PT Sans”;

  text-align: center;

  padding-top: 50px;

  color: #4c4c4c;

}

body span {

  font-size: .7em;

  font-style: italic;

}

h1 {

  font-size: 2em;

}

h2 {

  margin-top: 20px;

  font-size: 1.2em;

  color: #b2b2b2;

}

li {

  list-style: none;

  font-weight: bold;

}

.wrapper {

  position: relative;

  text-align: center;

  display: inline-block;

  width: 550px;

  height: 300px;

  padding-top: 30px;

}

.hamburger {

  margin: 0 auto;

  height: 400px;

  width: 250px;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

      -ms-flex-direction: column;

          flex-direction: column;

  cursor: pointer;

  text-align: center;

}

.item {

  position: relative;

  -webkit-transition: 0.3s;

  transition: 0.3s;

}

.link {

  position: absolute;

  left: 20%;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  color: inherit;

  text-decoration: none;

  font-size: 1.5em;

  opacity: 0;

  -webkit-transition: 0.3s 0.1s;

  transition: 0.3s 0.1s;

  z-index: 2;

}

.shadow {

  height: 30px;

  border-radius: 50%;

  width: 170px;

  margin: 0 auto;

  background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

  background-image: radial-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

  -webkit-transform: translateY(-115px);

          transform: translateY(-115px);

  -webkit-transition: 0.9s;

  transition: 0.9s;

}

.slide-in {

  opacity: 1;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  -webkit-transition: 0.3s;

  transition: 0.3s;

}

.fade {

  opacity: .2;

  -webkit-transition: 0.3s;

  transition: 0.3s;

}

.fade-out {

  opacity: 0;

  -webkit-transition: 0.9s;

  transition: 0.9s;

}

.bun_top {

  -webkit-transform: translateY(95px);

          transform: translateY(95px);

}

.tomato {

  -webkit-transform: translateY(75px);

          transform: translateY(75px);

}

.lettuce {

  -webkit-transform: translateY(45px);

          transform: translateY(45px);

}

.pickle {

  -webkit-transform: translateY(20px);

          transform: translateY(20px);

}

.cheese {

  -webkit-transform: translateY(-10px);

          transform: translateY(-10px);

}

.bacon {

  -webkit-transform: translateY(-40px);

          transform: translateY(-40px);

}

.burger {

  -webkit-transform: translateY(-75px);

          transform: translateY(-75px);

}

.bun_bottom {

  -webkit-transform: translateY(-95px);

          transform: translateY(-95px);

}

.item.bun_top-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.tomato-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.lettuce-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.pickle-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.cheese-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.bacon-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.burger-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.item.bun_bottom-explode {

  position: relative;

  -webkit-transition: 0.25s;

  transition: 0.25s;

  -webkit-transform: translateY(0);

          transform: translateY(0);

}

.bun_top-hover {

  -webkit-transform: translateY(85.5px);

          transform: translateY(85.5px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.tomato-hover {

  -webkit-transform: translateY(67.5px);

          transform: translateY(67.5px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.lettuce-hover {

  -webkit-transform: translateY(40.5px);

          transform: translateY(40.5px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.pickle-hover {

  -webkit-transform: translateY(18px);

          transform: translateY(18px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.cheese-hover {

  -webkit-transform: translateY(-9px);

          transform: translateY(-9px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.bacon-hover {

  -webkit-transform: translateY(-36px);

          transform: translateY(-36px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.burger-hover {

  -webkit-transform: translateY(-67.5px);

          transform: translateY(-67.5px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

.bun_bottom-hover {

  -webkit-transform: translateY(-85.5px);

          transform: translateY(-85.5px);

  position: relative;

  -webkit-transition: 0.15s;

  transition: 0.15s;

}

کد JS

var list = $(‘.item’),

hb = $(‘.hamburger’),

targets = $(‘.target’),

links = $(‘.link’),

open = false;

function build() {

var z = 7;

$.each(list, function(){

$(this).css(“z-index”, z);

z–;

$(this).addClass($(this).attr(“id”));

})

}

build();

function explode_burger() {

$.each(list, function(){

var self = this;

var id = $(this).attr(‘id’);

un_hover_burger();

setTimeout(function(){

console.log($(self));

$(self).addClass(id + “-explode”);

}, 300);

});

}

function shrink_burger() {

$.each(list, function(){

var explodeClass = $(this).attr(“id”) + “-explode”;

$(this).removeClass(explodeClass);

});

}

function hover_burger() {

$.each(list, function(){

var id = $(this).attr(‘id’);

$(this).addClass(id + “-hover”);

});

}

function un_hover_burger() {

$.each(list, function(){

var id = $(this).attr(‘id’);

$(this).removeClass(id + “-hover”);

});

}

$(‘a’).click(function(e){

e.preventDefault();

});

$(hb).click(function(){

if (open === false) {

explode_burger();

open = true;

} else {

$(this).children(‘.link’).removeClass(‘slide-in’);

$(this).children(‘svg’).attr(“class”, “”);

shrink_burger();

open = false;

}

});

$(hb).hover(function(){

if (open === false) {

hover_burger();

$(‘.shadow’).addClass(‘fade-out’);

}

}, function(){

if (open === false) {

un_hover_burger();

$(‘.shadow’).removeClass(‘fade-out’);

}

});

$(list).hover(function(){

if (open === true) {

$(this).children(‘.link’).addClass(‘slide-in’);

$(this).children(‘svg’).attr(“class”, “fade”);

}

}, function(){

$(this).children(‘.link’).removeClass(‘slide-in’);

$(this).children(‘svg’).attr(“class”, “”);

});

2. منو اتمی

در این منو شما وقتی به روی آیکون منو می روید این آیکون به صورت انیمیشنی تبدیل به یک مدل اتمی می شود.

برای مشاهده این منو اینجا را کلیک کنید.

کد HTML

<button>

  <div></div>

  <div></div>

  <div></div>

</button>

<p>hover & hold me down</p>

<a target=”_blank” href=”https://dribbble.com/Alexcoven”><img src=“http://i.imgur.com/kF8rP6D.png”></a>

کد CSS

body {

  background: #F26451;

}

img {

  width:30px;

  position:absolute;

  bottom:20px;

  right:20px;

}

p {

  position: absolute;

  top: 50%;

  left: 50%;

  color: #fff;

  text-transform: uppercase;

  letter-spacing: 4px;

  font-size: 10px;

  font-family: “helvetica” sans;

  text-align: center;

  margin-top: 45px;

  margin-left: -85px;

}

button {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 30px;

  height: 30px;

  -webkit-transition: all 300ms cubic-bezier(.61, .01, .42, 1);

  transition: all 300ms cubic-bezier(.61, .01, .42, 1);

  cursor: pointer;

  background: transparent;

  border: 0px;

}

div {

  height: 0px;

  border: 1.5px solid #fff;

  width: 22px;

  display: block;

  position: absolute;

  -webkit-transition: all 300ms cubic-bezier(.61, .01, .42, 1);

  transition: all 300ms cubic-bezier(.61, .01, .42, 1);

  background:#fff;

}

button:hover {

  -webkit-transition-delay: 100ms;

          transition-delay: 100ms;

  -webkit-transform: scale(1.1);

          transform: scale(1.1);

}

button:hover div:nth-child(3):before {

  width: 2px;

  height: 2px;

  border-radius: 50%;

  background: #F26451;

}

button:hover div {

  border: 2px solid #fff;

  height: 9px;

  border-radius: 50%;

  margin-left: -1px;

  margin-top: 2px;

  -webkit-animation: atom 300ms linear 1;

          animation: atom 300ms linear 1;

  width: 25px;

  top: 0px;

  background:transparent;

}

button:focus {

  outline: 0px;

}

div:nth-child(1) {

  top: 0px;

}

div:nth-child(2) {

  top: 8px;

}

div:nth-child(3) {

  top: 16px;

}

div:nth-child(3):before {

  opacity: 0;

  -webkit-animation: ball 1.5s linear infinite;

          animation: ball 1.5s linear infinite;

  content: ”;

  border: 2px solid #fff;

  display: block;

  position: relative;

  top: 0.25px;

}

button:hover div:nth-child(1) {

  -webkit-transform: rotate(-33deg);

          transform: rotate(-33deg);

}

button:hover div:nth-child(2) {

  -webkit-transform: rotate(90deg);

          transform: rotate(90deg);

}

button:hover div:nth-child(3) {

  -webkit-transform: rotate(33deg);

          transform: rotate(33deg);

}

button:hover div:nth-child(3):before {

  opacity: 1;

  -webkit-transition: opacity 600ms cubic-bezier(.61, .01, .42, 1);

  transition: opacity 600ms cubic-bezier(.61, .01, .42, 1);

  ;

}

button:active:hover div:nth-child(3):before,

button:active div:nth-child(3):before,

button:active div:nth-child(2) {

  opacity: 0;

  -webkit-transition: all 200ms;

  transition: all 200ms;

}

button:active div {

  border: 1.5px solid #fff;

  height: 0px;

  border-radius: 0%;

  margin-left: -1px;

  margin-top: 6px;

  -webkit-animation: division 300ms linear 1;

          animation: division 300ms linear 1;

  width: 25px;

  top: 0px;

}

button:active div:nth-child(2) {

  width: 0px;

}

button:active div:nth-child(3) {

  -webkit-transform: rotate(45deg);

          transform: rotate(45deg);

}

button:active div:nth-child(1) {

  -webkit-transform: rotate(-45deg);

          transform: rotate(-45deg);

}

@-webkit-keyframes atom {

  0% {

    -webkit-transform: rotate(180deg);

            transform: rotate(180deg);

  }

}

@keyframes atom {

  0% {

    -webkit-transform: rotate(180deg);

            transform: rotate(180deg);

  }

}

@-webkit-keyframes division {

  0% {

    -webkit-transform: rotate(180deg);

            transform: rotate(180deg);

  }

}

@keyframes division {

  0% {

    -webkit-transform: rotate(180deg);

            transform: rotate(180deg);

  }

}

@-webkit-keyframes ball {

  0% {

    left: -20%;

    top: 10%;

  }

  10% {

    left: 10%;

    top: -35%;

  }

  25% {

    left: 45%;

    top: -50%;

  }

  40% {

    left: 80%;

    top: -20%;

  }

  50% {

    left: 98%;

    top: 18%;

  }

  60% {

    left: 80%;

    top: 50%;

  }

  75% {

    left: 45%;

    top: 80%;

  }

  90% {

    left: 0%;

    top: 60%;

  }

  100% {

    left: -20%;

    top: 10%;

  }

}

@keyframes ball {

  0% {

    left: -20%;

    top: 10%;

  }

  10% {

    left: 10%;

    top: -35%;

  }

  25% {

    left: 45%;

    top: -50%;

  }

  40% {

    left: 80%;

    top: -20%;

  }

  50% {

    left: 98%;

    top: 18%;

  }

  60% {

    left: 80%;

    top: 50%;

  }

  75% {

    left: 45%;

    top: 80%;

  }

  90% {

    left: 0%;

    top: 60%;

  }

  100% {

    left: -20%;

    top: 10%;

  }

}

3. منویی کاملا با CSS

این هم یک منوی همبرگری زیبا و جزاب با این تفاوت که این منو کاملا با زبان CSS ساخته شده است. در این منو وقتی بر روی آن می رویم به شکل ⤫ در می آید.

برای مشاهده این منو اینجا را کلیک کنید.

کد CSS

/* Variables */

/* Helpers */

meta:nth-of-type(1), style:nth-of-type(1), script:nth-of-type(1) {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}

style:nth-of-type(1):before, script:nth-of-type(1):before, script:nth-of-type(1):after {

  display: block;

  width: 156px;

  height: 3px;

  border-radius: 3px;

  background: #e03a72;

}

html, meta:nth-of-type(1), style:nth-of-type(1):before, script:nth-of-type(1):before, script:nth-of-type(1):after {

  -webkit-animation-duration: 2s;

          animation-duration: 2s;

  -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);

          animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);

  -webkit-animation-fill-mode: both;

          animation-fill-mode: both;

  -webkit-animation-iteration-count: infinite;

          animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;

          animation-direction: alternate;

}

/* Mixins */

/* Main */

@-webkit-keyframes circle {

  0%, 34.999% {

    -webkit-clip-path: polygon(0 0);

            clip-path: polygon(0 0);

    border-color: #e03a72;

  }

  54.999% {

    -webkit-clip-path: polygon(0 0);

            clip-path: polygon(0 0);

  }

  55% {

    display: block;

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

  }

  57.5% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

  }

  60% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

  }

  62.5% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

  }

  65%, 100% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

    border-color: #FFF;

  }

}

@keyframes circle {

  0%, 34.999% {

    -webkit-clip-path: polygon(0 0);

            clip-path: polygon(0 0);

    border-color: #e03a72;

  }

  54.999% {

    -webkit-clip-path: polygon(0 0);

            clip-path: polygon(0 0);

  }

  55% {

    display: block;

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px, 375px 125px);

  }

  57.5% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, 125px -125px, 125px -125px, 125px -125px);

  }

  60% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, -125px 125px, -125px 125px);

  }

  62.5% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 125px 375px);

  }

  65%, 100% {

    -webkit-clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

            clip-path: polygon(125px 125px, 375px 125px, 125px -125px, -125px 125px, 125px 375px, 375px 125px);

    border-color: #FFF;

  }

}

@-webkit-keyframes line-middle {

  0%, 34.999% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    background: #e03a72;

  }

  40.5% {

    -webkit-transform: translateX(-18.72px);

            transform: translateX(-18.72px);

  }

  55% {

    -webkit-transform: translateX(47px);

            transform: translateX(47px);

  }

  57.5% {

    -webkit-transform: translateX(832.39816px);

            transform: translateX(832.39816px);

  }

  65%, 100% {

    -webkit-transform: translateX(832.39816px);

            transform: translateX(832.39816px);

    background: #FFF;

  }

}

@keyframes line-middle {

  0%, 34.999% {

    -webkit-transform: translateX(0);

            transform: translateX(0);

    background: #e03a72;

  }

  40.5% {

    -webkit-transform: translateX(-18.72px);

            transform: translateX(-18.72px);

  }

  55% {

    -webkit-transform: translateX(47px);

            transform: translateX(47px);

  }

  57.5% {

    -webkit-transform: translateX(832.39816px);

            transform: translateX(832.39816px);

  }

  65%, 100% {

    -webkit-transform: translateX(832.39816px);

            transform: translateX(832.39816px);

    background: #FFF;

  }

}

@-webkit-keyframes line-top {

  0%, 34.999% {

    -webkit-transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

            transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

    background: #e03a72;

  }

  49.5% {

    -webkit-transform: translateX(-15.6px) translateY(0) rotate(10deg);

            transform: translateX(-15.6px) translateY(0) rotate(10deg);

  }

  65%, 100% {

    -webkit-transform: translateX(0) translateY(40px) rotate(-135deg);

            transform: translateX(0) translateY(40px) rotate(-135deg);

    background: #FFF;

  }

}

@keyframes line-top {

  0%, 34.999% {

    -webkit-transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

            transform: translateX(0) translateX(0) translateY(0) rotate(0deg);

    background: #e03a72;

  }

  49.5% {

    -webkit-transform: translateX(-15.6px) translateY(0) rotate(10deg);

            transform: translateX(-15.6px) translateY(0) rotate(10deg);

  }

  65%, 100% {

    -webkit-transform: translateX(0) translateY(40px) rotate(-135deg);

            transform: translateX(0) translateY(40px) rotate(-135deg);

    background: #FFF;

  }

}

@-webkit-keyframes line-bottom {

  0%, 34.999% {

    -webkit-transform: translateY(0) rotate(0deg);

            transform: translateY(0) rotate(0deg);

    background: #e03a72;

  }

  49.5% {

    -webkit-transform: translateX(-15.6px) translateY(0) rotate(-10deg);

            transform: translateX(-15.6px) translateY(0) rotate(-10deg);

  }

  65%, 100% {

    -webkit-transform: translateX(0) translateY(-40px) rotate(135deg);

            transform: translateX(0) translateY(-40px) rotate(135deg);

    background: #FFF;

  }

}

@keyframes line-bottom {

  0%, 34.999% {

    -webkit-transform: translateY(0) rotate(0deg);

            transform: translateY(0) rotate(0deg);

    background: #e03a72;

  }

  49.5% {

    -webkit-transform: translateX(-15.6px) translateY(0) rotate(-10deg);

            transform: translateX(-15.6px) translateY(0) rotate(-10deg);

  }

  65%, 100% {

    -webkit-transform: translateX(0) translateY(-40px) rotate(135deg);

            transform: translateX(0) translateY(-40px) rotate(135deg);

    background: #FFF;

  }

}

@-webkit-keyframes background {

  0%, 55% {

    background: #2c2c2c;

  }

  65%, 100% {

    background: #b83170;

  }

}

@keyframes background {

  0%, 55% {

    background: #2c2c2c;

  }

  65%, 100% {

    background: #b83170;

  }

}

html {

  position: relative;

  height: 100%;

  box-sizing: border-box;

  -webkit-animation-name: background;

          animation-name: background;

}

*, *:before, *:after {

  box-sizing: inherit;

}

head {

  display: block;

}

meta:nth-of-type(1) {

  display: block;

  width: 250px;

  height: 250px;

  border: 3px solid #e03a72;

  border-radius: 100%;

  -webkit-animation-name: circle;

          animation-name: circle;

}

style:nth-of-type(1) {

  display: block;

  height: 250px;

  width: 250px;

  overflow: hidden;

  text-indent: -99999px;

}

style:nth-of-type(1):before {

  content: “”;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -1.5px;

  margin-left: -78px;

  -webkit-animation-name: line-middle;

          animation-name: line-middle;

}

script:nth-of-type(1) {

  display: block;

  height: 250px;

  width: 250px;

  text-indent: -99999px;

}

script:nth-of-type(1):before, script:nth-of-type(1):after {

  content: “”;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -78px;

}

script:nth-of-type(1):before {

  margin-top: -41.5px;

  -webkit-animation-name: line-top;

          animation-name: line-top;

}

script:nth-of-type(1):after {

  margin-top: 38.5px;

  -webkit-animation-name: line-bottom;

          animation-name: line-bottom;

}

@media screen and (min-width: 800px) {

  body:after {

    content: “Note: Firefox doesn’t support path-clip: polygon(…); It’s recommend to use Chrome instead”;

    display: block;

    position: absolute;

    bottom: 10px;

    right: 10px;

    color: #FFF;

    font-family: Arial;

    font-size: 11px;

  }

}

تاریخ ارسال
22 تیر 1395
ارسال شده توسط
کوروش هاشمی
میزان بازدید
0 نفر بازدیدکننده
2 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
نویسنده : کوروش هاشمی
حجم و فرمت :

2 دیدگاه ثبت شده

شما هم نظری بدهید
محسن آستانه

تشکر

    مدیر- علی پردل

    خواهش میکنم
    موفق باشید

توجه فرمایید:
نظرات شما پس از بررسی و تایید نمایش داده می شود.
لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.