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

چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت پنجم )

سی اس اس ( CSS: Cascading Style Sheets ) در کنار اچ تی ام ال ( HTML ) هستهٔ فناوری ساخت صفحه های وب هستند. سی اس اس روشی ساده برای نمایش چیدمان و جلوه های تصویری ( مانند نوع قلم، رنگ و اندازه ها ) بر صفحه های وب است. در اینجا ما به شما چند انیمیشن که برای برنامه نویس ها و طراحان وب می تواند بسیار مفید و جالب و جذاب باشد را نشان می دهیم. با این حال این مجموعه در بسیاری از چیزهایی که شما می توانید با CSS تحرک را ایجاد کنید تمرکز دارد و خلاقیت شما برای ایجاد انیمیشن با CSS نیز چند پله بالاتر می برد. پس با ما همراه باشید ( مثل قسمت قبل ) در چند انیمیشن جالب با CSS که شما باید ببینید.

در آغاز، وب سایتها با کُدهای ساده HTML نوشته میشدند. با پیشرفت وب و هنر طراحی آن، زبان کُد نویسی اش، اچ تی ام ال، پیچیده تر و پرانعطاف تر شد. با پیدایش الگوهای «CSS»، روش نادرست طراحی با جدول های پنهان در صفحه از گردونه خارج، و بجای آن استفاده مناسب از زبان کمکی «CSS» جایگزین شد. فناوریهای یکپارچه سازی پایگاه داده (Database)، مانند زبان های کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI، PHP، ASP. NET، ASP، JSP و ColdFusion، و استانداردهای طراحی مدرن با الگو ها (CSS)، ساختار وب سایت ها را باز هم تغییر داده و آن را پیشرفته تر کرده اند.

برای درج CSS در یک سند اچ تی ام ال از یکی از سه روش زیر میتوان بهره گرفت (به طور مفصل تر در مقاله نخست) :

شیوه نامهٔ داخلی

شیوه نامهٔ داخلی در قسمت <head> در سند اچ تی ام ال، با استفاده از تگ <style> معین می گردد.

شیوه نامهٔ خارجی

در این روش برای اتصال یک سند CSS که با پسوند .css شناخته می شود، از تگ <link> در قسمت <head> استفاده می شود.

شیوه نامهٔ درون خطی

در این روش مشخصات شیوه نامهٔ در تگ مربوطه ذکر میشود.

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

Animated Shopping Cart Icon.1 ( انیمیشن مربوط به آیکون های خرید )

انیمیشن های متحرک زیبا برای زمانی که مواد غذایی به سبد خرید اضافه شده است. در این جا سه نمونه متفاوت از هر مدل انیمیشن وجود دارد که شامل سبد خرید و ستاره دار کردن برای خرید در زمانی دیگر ( save for later ) و علامت دار کردن به عنوان یک هدیه ( this is a Gift ) و اضافه کردن محصول به علاقه مندی و … می شود. حتما این انیمیشن ها را امتحان کنید.

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

کد HTML

<link href=’http://fonts.googleapis.com/css?family=Nunito:400′ rel=’stylesheet’ type=’text/css’> 

<header>

  <img class=”shop-sign”src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/headerpic.svg” alt=”Fake Fruit Shop Sign” />

</header>

  <div class=”demo demo-1″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Cart Icon–>

        <svg class=”cart-icon-1″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218  c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

          <path class=”check-1″ fill=”none” stroke=”#7aa23f” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M60.207,73.377l6.817,6.817 M81.273,64.554l-14.249,15.64″/>

        </svg>

        <!–End First Cart Icon–>

        <img class=”apple-1″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/apple.svg” alt=”Apple Icon” />

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <img class=”lime-1″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lime.svg” alt=”Lime Icon” />

        <!–Begin Second Cart Icon–>

        <svg class=”cart-icon-2″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line class=”center-line” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

        </svg>

        <!–End Second Cart Icon–>    

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Cart Icon–>

        <svg class=”cart-icon-3″ version=”1.1″ width=”150px” height=”150px” viewBox=”0 0 90.156 89.89″>

          <path class=”main-path-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.973,26.021V15.296c0-1.109-0.865-2.292-1.922-2.628L1.49,8.99 M62.354,55.639c0,1.109-0.101,2.236-0.224,2.504

          c-0.123,0.268-1.684,0.487-2.793,0.487H17.989c-1.109,0-2.242-0.098-2.517-0.218c-0.275-0.12-0.5-1.664-0.5-2.773V23.273

          c0-1.109,0.101-2.236,0.224-2.504c0.123-0.268,1.684-0.487,2.793-0.487h41.348c1.109,0,2.242,0.098,2.517,0.218 c0.275,0.12,0.5,1.664,0.5,2.773V55.639z”/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”30.863″ y1=”20.74″ x2=”30.863″ y2=”58.63″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”46.837″ y1=”20.74″ x2=”46.837″ y2=”58.63″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”33.308″ x2=”61.24″ y2=”33.308″/>

          <line class=”center-line-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”15.973″ y1=”46.285″ x2=”61.125″ y2=”46.285″/>

          <circle class=”wheel-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”23.442″ cy=”64.554″ r=”5.924″/>

          <circle class=”wheel-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”53.314″ cy=”64.554″ r=”5.924″/>

          <path class=”outer-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M67.378,52.665

          c1.29-0.143,2.615-0.147,3.959,0.001c9.837,1.087,16.93,9.943,15.843,19.78s-9.943,16.93-19.78,15.843

          c-7.378-0.815-13.212-6.001-15.21-12.692″/>

          <path class=”cart-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.516,70.556h17.695 M70.364,61.708v17.695″/>

          </svg>

        <!–End Third Cart Icon–>

        <div class=”one”>1</div>

      </a>

    </div>

  </div>

  <div class=”demo demo-2″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

      <!–Begin First Star Icon–>

        <svg class=”star-icon star-icon-1″ version=”1.1″ width=”103px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”star-dashes-1″ fill=”#FFFFFF” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M20.881,6.26

          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204″/>

          <path class=”star-check-1″ fill=”none” stroke=”#f9f706″ stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64″/>

        </svg>

        <!–End First Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Star Icon–>

        <svg class=”star-icon star-icon-2″ version=”1.1″ width=”106px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”star-dashes-2″ fill=”#FFFFFF” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-miterlimit=”10″ d=”M20.881,6.26

          l6.333,7.333 M103.214,63.961l-9.173-3.122 M78.519,13.835l5.724-7.818 M52.777,100.544l0.048-9.69 M11.823,61.737l-9.436,2.204″/>

          M42.681,47.839l6.817,6.817 M63.747,39.016l-14.249,15.64″/>

        </svg>

        <!–End Second Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Star Icon–>

        <svg class=”star-icon star-icon-3″ version=”1.1″ width=”106px” height=”103px” viewBox=”0 0 105.602 102.931″>

          <path class=”main-star-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0 l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

          <path class=”main-star-4″ fill=”none” stroke=”#f9f706″ stroke-width=”6″ stroke-miterlimit=”10″ d=”M52.35,3.11c0.475-0.963,1.253-0.963,1.728,0  l12.211,24.742c0.475,0.963,1.734,1.877,2.796,2.032l27.305,3.968c1.063,0.154,1.303,0.894,0.534,1.644L77.167,54.754

          c-0.769,0.75-1.25,2.229-1.068,3.287l4.664,27.194c0.182,1.058-0.448,1.516-1.398,1.016L54.942,73.413

          c-0.951-0.5-2.506-0.5-3.456,0L27.064,86.252c-0.951,0.5-1.58,0.043-1.398-1.016l4.664-27.194c0.182-1.058-0.299-2.538-1.068-3.287

          L9.504,35.495c-0.769-0.75-0.529-1.489,0.534-1.644l27.305-3.968c1.063-0.154,2.321-1.069,2.796-2.032L52.35,3.11z”/>

        </svg>

        <!–End Third Star Icon–>

        <span class=”text save-text”>Save for Later</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-3″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Gift Icon–>

        <svg class=”box-icon box-icon-1″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849

          c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091

          c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-1 bow-1-right” fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End First Gift Icon–>

        <span class=”text gift-text”>This is a Gift</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

      <!–Begin Gift Star Icon–>

        <svg class=”box-icon box-icon-2″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091 c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End Second Gift Icon–>

        <img class=”lemon-gift-2″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lemon.svg” alt=”Lemon Icon” />

        <span class=”text gift-text”>This is a Gift</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Gift Icon–>

        <svg class=”box-icon box-icon-3″ version=”1.1″ width=”74px” height=”89px” viewBox=”0 0 74.479 89.141″>

          <path class=”box-bottom-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M67.874,84.885

          c0,1.173-0.959,2.132-2.132,2.132H8.737c-1.173,0-2.132-0.959-2.132-2.132V44.389c0-1.173,0.959-2.132,2.132-2.132h57.005 c1.173,0,2.132,0.959,2.132,2.132V84.885z”/>

          <path class=”box-top-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-miterlimit=”10″ d=”M72.354,41.018

          c0,0.655-0.536,1.191-1.191,1.191H3.315c-0.655,0-1.191-0.536-1.191-1.191v-9.795c0-0.655,0.536-1.191,1.191-1.191h67.849 c0.655,0,1.191,0.536,1.191,1.191V41.018z”/>

          <path class=”bow-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M36.491,87.017c0,0,0-56.14,0-56.976c0-9.195,1.934-26.713-11.045-27.872c-9.035-0.807-14.344,9.487-11.634,17.091   c3.113,8.734,14.479,10.773,22.678,10.773″/>

          <path class=”bow-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M37.988,87.017c0,0,0-56.14,0-56.976c0-9.195-1.934-26.713,11.045-27.872c9.035-0.807,14.344,9.487,11.634,17.091

          c-3.113,8.734-14.479,10.773-22.678,10.773″/>

        </svg>

        <!–End Third Gift Icon–>

        <img class=”lime-2″ src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/lime.svg” alt=”Lime Icon” />

        <span class=”text gift-text”>This is a Gift</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-4″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Favorite Icon–>

        <svg class=”heart-icon heart-icon-1″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

          <circle class=”loader-1 loader-1-l” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”25.173″ cy=”39.773″ r=”5.014″/>

          <circle class=”loader-1 loader-1-r” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”65.477″ cy=”39.773″ r=”5.014″/>

          <circle class=”loader-1 loader-1-m” fill=”#ec6d46″ stroke=”none” stroke-miterlimit=”10″ cx=”45.325″ cy=”39.773″ r=”5.014″/>

        </svg>

        <!–End First Favorite Icon–> 

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Favorite Icon–>

        <svg class=”heart-icon heart-icon-2″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

        </svg>        

        <!–End Second Favorite Icon–>    

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Favorite Icon–>

        <svg class=”heart-icon heart-icon-3″ version=”1.1″ width=”91px” height=”85px” viewBox=”0 0 90.65 85.04″>

          <path class=”heart-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

          C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

        </svg>

        <!–End Third Favorite Icon–> 

        <span class=”text favorite-text”>Add to Favorites</span>

      </a>

    </div>

  </div>

  <div class=”demo demo-5″>

    <div class=”contain-all”>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin First Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-1″ fill=”#e3da74″ stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695  h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833  c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-1″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-1″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695 h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End First Truck Icon–>

        <img class=”inside-truck” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/insidetruck.svg” alt=”Orange Inside Truck” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Second Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695 h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-2″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-2″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695      h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End Second Truck Icon–>

        <img class=”truck-grapes” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/grapes.svg” alt=”Grapes Icon” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

      <a href=”#” class=”contain-icon icon-hook”>

        <!–Begin Third Truck Icon–>

        <svg class=”truck-icon” version=”1.1″ width=”133px” height=”111px” viewBox=”0 0 96.71 73.53″>

          <path class=”truck-back-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M56.439,43.455c0,1.488-1.206,2.695-2.695,2.695H5.541c-1.488,0-2.695-1.206-2.695-2.695V5.432c0-1.488,1.206-2.695,2.695-2.695   h48.203c1.488,0,2.695,1.206,2.695,2.695V43.455z”/>

          <line class=”truck-base-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”4″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ x1=”93.414″ y1=”51.539″ x2=”3.296″ y2=”51.539″/>

          <path class=”truck-cab-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M61.379,51.539V10.386c0-1.297,1.061-2.357,2.357-2.357H80.8c1.297,0,2.827,0.951,3.4,2.114l6.824,13.833     c0.574,1.163,1.043,3.175,1.043,4.472v23.091″/>

          <circle class=”tire-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”18.239″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M14.425,65.193l7.628-7.304 M14.587,57.728l7.304,7.628″/>

          <circle class=”tire-3″ class=”tire” fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ cx=”77.247″ cy=”61.542″ r=”9.14″/>

          <path class=”tire-plus-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M73.433,65.193l7.628-7.304 M73.595,57.728l7.304,7.628″/>

          <path class=”window-3″ fill=”none” stroke=”#FFFFFF” stroke-width=”3″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

          M84.283,25.192c0,1.488-0.757,2.695-2.245,2.695H69.612c-1.488,0-2.695-1.206-2.695-2.695v-8.383c0-1.488,1.206-2.695,2.695-2.695       h8.383c1.488,0,2.395,0.748,3.144,2.695L84.283,25.192z”/>

        </svg>

        <!–End Third Truck Icon–>

        <img class=”dashes” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/dashes.svg” alt=”Motion Lines” />

        <img class=”watermelon-truck” src=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/watermelon.svg” alt”Watermelon Icon” />

        <span class=”text truck-text”>Ground Shipping</span>

      </a>

    </div>

  </div>

  <footer>

    <div class=”contain-footer-info”>

     <span class=”made-with”>Made with</span>

     <svg class=”by-heart” version=”1.1″ width=”50px” height=”34px” viewBox=”0 0 90.65 85.04″>

        <path class=”by-heart-path” fill=”none” stroke=”#ea6b46″ stroke-width=”5″ stroke-linecap=”round” stroke-linejoin=”round” stroke-miterlimit=”10″ d=”

        M45.137,23.041c4.912-24.596,40.457-27.775,42.128-0.435c1.398,22.88-21.333,40.717-42.128,50.522 M45.137,23.041

        C40.225-1.555,5.057-4.734,3.387,22.606c-1.398,22.88,20.955,40.717,41.75,50.522″/>

      </svg>

      <span class=”by”>by<a href=”http://jonibologna.com/” class=”byline”>Joni Trythall</a></span>

    </div>

  </footer>

کد CSS

/* Basic Styling */

header {

  background: #e3da74;

  width: 100%;

  height: 300px;

}

.shop-sign {

  position: absolute;

  left: 50%;

  margin-left: -190px;

  margin-top: 50px;

  width: 380px;

}

.demo {

  position: relative;

  font-family: ‘Nunito’, sans-serif;

  color: white;

  width: 100%;

  height: 650px;

}

.contain-all {

  margin: auto;

  width: 150px;

}

a {

  position: relative;

  display: block;

  margin: auto;

  padding-top: 50px;

  text-decoration: none;

  color: white;

  width: 150px;

  height: 150px;

}

a:visited {

  text-decoration: none;

  color: inherit;

}

a:active {

  text-decoration: none;

  color: inherit;

}

.icon-hook {

  position: relative;

}

.icon-hook:after {

  content: “”;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.icon-hook > svg {

  pointer-events: none;

}

.contain-card {

  padding-top: 75px;

  height: 350px;

}

.demo-1 {

  background: #e3da74;

}

.demo-2 {

  background: #b2c460;

}

.demo-3 {

  background: #f69159;

}

.demo-4 {

  background: #fcab54;

}

.demo-5 {

  background: #e3da74;

}

svg {

  position: absolute;

  z-index: 5;

}

.text {

  position: absolute;

  font-size: 20px;

  font-weight: bold;

}

.save-text {

  top: 140px;

}

.gift-text {

  top: 150px;

  left: 2px;

}

.favorite-text {

  top: 160px;

  left: -15px;

  width: 180px;

}

.truck-text {

  top: 170px;

  left: -20px;

  width: 180px;

}

footer {

  position: relative;

  background: #e3da74;

  height: 250px;

  font-family: ‘Nunito’, sans-serif;

  color: white;

  font-size: 18px;

}

.by-heart {

  position: absolute;

  top: -2px;

}

.by {

  margin-left: 55px;

}

.byline {

  position: absolute;

  top: 35px;

  left: 120px;

  padding: 0;

  margin: 0;

  height: 20px;

}

.byline:hover {

  color: #fcab54;

}

.contain-footer-info {

  position: absolute;

  top: 100px;

  left: 50%;

  margin-left: -200px;

  text-align: center;

  width: 400px;

  height: 50px;

}

/* Cart Demo 1 */

.check-1 {

  opacity: 0;

  -webkit-transform-origin: center;

}

.apple-1 {

  position: absolute;

  opacity: 0;

  top: 30px;

  left: 42px;

  width: 45px;

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

}

.active .apple-1 {

  -webkit-animation: add-apple-1 2s forwards;

}

.active .cart-plus-1 {

  -webkit-animation: added 1s forwards;

}

.active .check-1 {

  -webkit-animation: checked 1s forwards;

}

@-webkit-keyframes add-apple-1 {

  50% {

    opacity: 1;

  }

  to {

    -webkit-transform: translateY(57px);

    opacity: 1;

  }

}

@-webkit-keyframes added {

  1% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@-webkit-keyframes checked {

  50% {

    opacity: 1;

    -webkit-transform: scale(1.5);

  }

  100% {

    opacity: 1;

  }

}

/* Cart Demo 2 */

.cart-2 {

  padding-top: 50px;

}

.lime-1 {

  position: absolute;

  top: 96px;

  left: 37px;

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

  opacity: 0;

  width: 55px;

}

.center-line {

  stroke-dasharray: 50; 

}

.check-2 {

  opacity: 0;

}

.active .center-line {

  -webkit-animation: draw-cart 3s forwards;

}

.active .lime-1 {

  -webkit-animation: lime-appear 1s 1s forwards;

}

.active .cart-plus-2 {

  stroke: #7aa23f;

}

@-webkit-keyframes lime-appear {

  50% {

    opacity: 1;

    -webkit-transform: scale(.5);

  }

  100% {

    opacity: 1;

  }

}

@-webkit-keyframes draw-cart {

  0% {

    stroke-dashoffset: 0;

  }

  25% {

    stroke-dashoffset: 50;

  }

  50% {

    stroke-dashoffset: 50;

  }

  75% {

    stroke-dashoffset: 50;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Cart Demo 3 */

.one {

  position: absolute;

  top: 65px;

  left: 47px;

  color: #ef9234;

  font-size: 55px;

  opacity: 0;

  -webkit-transform: scale(.1) rotate(260deg);

}

.center-line-3 {

  stroke-dasharray: 50;

}

.active .center-line-3 {

  -webkit-animation: remove-middle 1s forwards;

}

.active .one {

  -webkit-animation: count 1500ms 500ms forwards;

}

.active .cart-plus-3 {

  stroke: #7aa23f;

}

@-webkit-keyframes count {

  50% {

    opacity: 1;

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

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(15px);

  }

}

@-webkit-keyframes remove-middle {

  to {

    stroke-dashoffset: 50;

  }

}

/* Save Demo 1 */

.star-icon {

  left: 25px;

  width: 80px;

}

.star-dashes-1 {

  opacity: 0;

}

.star-check-1 {

  opacity: 1;

  stroke-dasharray: 22;

  stroke-dashoffset: 22;

}

.active .star-dashes-1 {

  -webkit-animation: flash-1 1s forwards;

}

.active .star-check-1 {

  -webkit-animation: star-checked-1 1s forwards;

}

@-webkit-keyframes flash-1 {

  50% {

    opacity: 1;

  }

}

@-webkit-keyframes star-checked-1 {

  50% {

    stroke-dashoffset: 0;

  }

  75% {

    stroke-dashoffset: 0;

    -webkit-transform-origin: center;

    -webkit-transform: rotate(360deg) scale(1.5);

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Save Demo 2 */

.star-dashes-2 {

  opacity: 0;

  -webkit-transform-origin: center;

  -webkit-transform: scale(.5);

}

.active .star-dashes-2 {

  -webkit-animation: dashes-2 2s forwards;

}

.active .main-star-2 {

  fill: yellow;

  -webkit-transform: rotate(360deg);

}

@-webkit-keyframes dashes-2 {

  50% {

    opacity: 1;

    stroke: #f9f706;

    -webkit-transform: rotate(360deg);

  }

}

/* Save Demo 3 */

.main-star-4 {

  z-index: 10;

  stroke-dasharray: 310;

  stroke-dashoffset: 310;

}

.active .main-star-4 {

  -webkit-animation: draw-star-3 2s forwards;

  fill: #f9f706;

}

@-webkit-keyframes draw-star-3 {

  50% {

    stroke-dashoffset: 0;

  }

}

/* Gift Demo 1 */

.box-icon {

  left: 30px;

}

.bow-1 {

  stroke-dasharray: 140;

  stroke-dashoffset: -140;

}

.bow-1-right {

  stroke-dashoffset: 140;

}

.active .bow-1 {

  -webkit-animation: draw-bow-1 1s forwards;

}

.active .bow-1-right {

  -webkit-animation: draw-bow-1 1s 1s forwards;

}

@-webkit-keyframes draw-bow-1 {

  1% {

    opacity: 1;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

/* Gift Demo 2 */

.bow-2 {

  opacity: 0;

  stroke-dasharray: 140;

  stroke-dashoffset: 140;

}

.lemon-gift-2 {

  position: absolute;

  top: 97px;

  left: 42px;

  -webkit-tranform-origin: center;

  -webkit-transform: scale(.5) rotate(-180deg);

  opacity: 0;

  width: 50px;

}

.active .box-top-2 {

  -webkit-animation: open-2 2s forwards;

}

.active .lemon-gift-2 {

  -webkit-animation: lemon-appear-2 1s 500ms forwards;

}

.active .bow-2 {

  -webkit-animation: draw-bow-2 1s 2s forwards;

}

@-webkit-keyframes draw-bow-2 {

  1% {

    opacity: 1;

  }

  100% {

    opacity: 1;

    stroke-dashoffset: 0;

  }

}

@-webkit-keyframes open-2 {

  50% {

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

  }

}

@-webkit-keyframes lemon-appear-2 {

  to {

    opacity: 1;

    -webkit-transform: rotate(-20deg) scale(1);

  }

}

/* Gift Demo 3 */

.bow-3 {

  opacity: 0;

  stroke-dasharray: 140;

  stroke-dashoffset: -140;

}

.lime-2 {

  position: absolute;

  top: 98px;

  left: 43px;

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

  opacity: 0;

  width: 48px;

}

.active .box-icon-3 {

  -webkit-animation: expand-gift 1s 1s forwards;

}

.active .lime-2 {

  -webkit-animation: show-lime 1s forwards, expand-gift 1s 1s forwards;

}

.active .bow-3 {

  -webkit-animation: draw-bow-3 1s 1s forwards;

}

@-webkit-keyframes show-lime {

  to {

    opacity: 1;

  }

}

@-webkit-keyframes draw-bow-3 {

  1% {

    opacity: 1;

  }

  100% {

    opacity: 1;

    stroke-dashoffset: 0;

  }

}

@-webkit-keyframes expand-gift {

  50% {

    -webkit-transform: scale(1.2);

  }

}

/* Favorites Demo 1 */

.heart-icon {

  top: 75px;

  left: 22px;

}

.loader-1 {

  opacity: 0;

  -webkit-transform: scale(.3);

}

.active .heart-1 {

  -webkit-transform-origin: center;

  -webkit-animation: grow-heart 500ms 2s forwards;

  stroke: #ec6d46;

}

.active .loader-1-l {

  -webkit-animation: load-1 500ms 500ms forwards;

}

.active .loader-1-m {

  -webkit-animation: load-1 500ms 1s forwards;

}

.active .loader-1-r {

  -webkit-animation: load-1 500ms 1500ms forwards;

}

@-webkit-keyframes load-1 {

  50% {

    opacity: 1;

    -webkit-transform-origin: center;

    -webkit-transform: scale(2);

  }

}

@-webkit-keyframes grow-heart {

  50% {

    -webkit-transform: scale(.3);

  }

}

/* Favorites Demo 2 */

.heart-2 {

  -webkit-transform-origin: bottom;

  transition: stroke 1s 1s ease;

}

.active .heart-2 {

  -webkit-animation: heart-beat 1s forwards;

  stroke: #ec6d46;

}

@-webkit-keyframes heart-beat {

  25% {

    -webkit-transform: scale(.3);

  }

  50% {

    -webkit-transform: scale(1);

  }

  75% {

    -webkit-transform: scale(.3);

  }

  100% {

    -webkit-transform: scale(1);

  }

}

/* Favorites Demo 3 */

.heart-3 {

  -webkit-transform-origin: center;

  stroke-dasharray: 135;

}

.active .heart-3 {

  -webkit-animation: draw-heart-3 2s forwards;

  stroke: #ec6d46;

}

@-webkit-keyframes draw-heart-3 {

  0% {

    stroke-dashoffset: -135;

    -webkit-transform: scale(.2) rotate(-280deg);

  }

  30% {

    stroke-dashoffset: 135;

    -webkit-transform: scale(.4) rotate(280deg);

  }

  60% {

    stroke-dashoffset: -135;

     -webkit-transform: scale(.6);

  }

  100% {

    stroke-dashoffset: 0;

    stroke: #ec6d46;

  }

}

/* Truck Icon Demo 1 */

.truck-icon {

  top: 60px;

}

.inside-truck {

  position: absolute;

  top: 67px;

  left: 2px;

  width: 77px;

}

.active .truck-back-1 {

  -webkit-transform-origin: center;

  -webkit-animation: truck-flip 2s forwards, add-orange 1s 1s forwards;

}

.active .inside-truck {

  -webkit-transform-origin: center;

  -webkit-animation: truck-flip 2s forwards;

}

.active .tire-plus-1 {

  -webkit-animation: turn-plus 1s 500ms forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes turn-plus {

  50% {

    -webkit-transform-origin: center;

    -webkit-transform: scale(1.5);

  }

  100% {

    -webkit-transform-origin: center;

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes truck-flip {

  50% {

    -webkit-transform: scale(.7);

  }

  100% {

    -webkit-transform: scale(1) rotateY(180deg);

  }

}

@-webkit-keyframes add-orange {

  to {

    fill: none;

    stroke: none;

  }

}

/* Truck Icon Demo 2 */

.truck-grapes {

  position: absolute;

  top: 67px;

  left: 20px;

  -webkit-transform-origin: center;

  -webkit-transform: scale(.2);

  opacity: 0;

  width: 40px;

}

.active .truck-grapes {

  -webkit-animation: add-truck-grapes 2s forwards;

}

.active .tire-plus-2 {

  -webkit-transform-origin: center;

  -webkit-animation: drive-plus 1s forwards, enlarge-plus-2 1s 1s forwards;

  stroke: #7aa23f;

}

.active .tire-2 {

  -webkit-transform-origin: center;

  -webkit-animation: enlarge-plus-2 1s 1s forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes drive-plus {

  1% {

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

  }

}

@-webkit-keyframes enlarge-plus-2 {

  50% {

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

  }

  100% {

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes add-truck-grapes {

  1% {

    opacity: 1;

  }

  75% {

    opacity: 1;

    -webkit-transform: scale(1.2) rotate(260deg);

  }

  100% {

    opacity: 1;

    -webkit-transform: scale(1) rotate(300deg);

  }

}

/* Truck Icon Demo 3 */

.dashes {

  position: absolute;

  top: 100px;

  left: -50px;

  opacity: 0;

  width: 40px;

}

.watermelon-truck {

  position: absolute;

  top: 60px;

  left: 6px;

  z-index: 5;

  -webkit-transform: rotateX(90deg);

  width: 70px;

}

.active .watermelon-truck {

  -webkit-animation: add-melon 1s forwards;

}

.active .dashes {

  -webkit-animation: fast 1s 500ms forwards;

}

.active .tire-plus-3 {

  -webkit-transform-origin: center;

  -webkit-animation: drive-3 1500ms 500ms forwards;

  stroke: #7aa23f;

}

@-webkit-keyframes drive-3 {

  100% {

    -webkit-transform: rotate(45deg);

  }

}

@-webkit-keyframes fast {

  to {

    opacity: 1;

  }

}

@-webkit-keyframes add-melon {

  to {

    -webkit-transform: rotateX(360deg);

  }

}

/* Footer Heart */

.by-heart-path {

  stroke-dasharray: 7;

  -webkit-animation: move-heart 1s infinite;

}

@-webkit-keyframes move-heart {

  50% {

    stroke-dashoffset: 40;

  }

}

/* Media query for layout */

@media (min-width: 800px) {

  .demo {

    height: 250px;

  }

  .contain-all {

    margin: auto;

    width: 765px;

  }

  a {

    display: inline-block;

    margin-right: 150px;

  }

  footer .byline {

    display: block;

    margin-right: 0;

  }

  .contain-icon:last-of-type {

    margin-right: 0;

  }

}

کد JS

// Chrome only for now

// Get a list of all svg elements

icons = document.querySelectorAll(‘.icon-hook’);

// Cycle through list

for (var i = 0; i < icons.length; i++) {

  icons[i].addEventListener(‘click’, function(event) {

    event.preventDefault();

    var icon = this;

    var currentClass = icon.getAttribute(‘class’); // The starting class

    console.log(icon);

    if (currentClass.indexOf(‘active’) > -1) {

      // Remove .active

      icon.setAttribute(‘class’, currentClass.replace(‘ active’, ”));

    } else {

      // Add .active

      icon.setAttribute(‘class’, currentClass + ‘ active’);

    }

  }, false);

}

Submit button .2 ( دکمه ارسال )

برای ارسال بر روی submit کلیک کنید و دکمه متحرکی که فرآیند بارگذاری را نشان می دهد می آید سپس با یک تیک پیغام شما ارسال می شود!

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

کد HTML

<div class=”center-component”>

  <button class=”colins-submit”>

    <svg width=”196″ height=”70″

         viewPort=”0 0 196 70″ version=”1.1″

         xmlns=”http://www.w3.org/2000/svg”>

      

      <rect class=”btn-shape btn-bg”

            x=”3″ y=”3″

            width=”190″ height=”64″

            rx=”32″ ry=”32″

            fill=”#ffffff”

            fill-opacity=”1″

            stroke=”#ccc” stroke-width=”4″

            />

      <rect class=”btn-shape btn-color”

            x=”3″ y=”3″

            width=”190″ height=”64″

            rx=”32″ ry=”32″

            fill=”#ffffff”

            fill-opacity=”0″

            stroke=”rgb(30,205,151)” stroke-width=”4″

            />

      <text class=”checkNode” x=”96″ y=”40″

            font-family=”Montserrat”

            font-size=”22″

            fill-opacity=”1″

            text-anchor=”middle”

            fill=”rgb(255,255,255)” >

       

      </text>

      <text class=”textNode” x=”96″ y=”40″

            transform=”scale(1)”

            font-family=”Montserrat”

            font-size=”16″

            fill-opacity=”1″

            text-anchor=”middle”

            fill=”rgb(30,205,151)” >

        Submit

      </text>

    </svg>

  </button>

  <p>My <a href=”http://www.greensock.com/gsap-js/” target=”_blank”>Greensock</a> controlled version of <a href=”https://dribbble.com/shots/1426764-Submit-Button” target=”_blank”>Colin Garven’s Submit button</a>. No CSS Keyframes, all one JS timeline + SVG.</p>

</div>

کد CSS

body {

  text-align: center;

}

.center-component {

  position: absolute;

  top: 50%;

  left: 50%;

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

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

}

button.colins-submit {

  background: transparent;

  border: none;

}

button.colins-submit.is-active {

  cursor: default;

}

button.colins-submit:focus {

  outline: none;

}

button.colins-submit::-moz-focus-inner {

  border: 0;

}

button.colins-submit svg text {

  font-family: ‘Montserrat’, sans-serif;

}

button.colins-submit svg text.textNode {

  fill: #1ecd97;

}

button.colins-submit svg text.checkNode {

  fill-opacity: 0;

}

button.colins-submit svg rect.btn-shape.btn-bg {

  stroke: #c8c8c8;

  fill: white;

}

button.colins-submit svg rect.btn-shape.btn-color {

  stroke: #1ecd97;

  fill: white;

  stroke-dasharray: 453;

  stroke-dashoffset: 0;

}

p {

  font-family: Montserrat, sans-serif;

  color: #575757;

  font-size: 1rem;

  max-width: 330px;

}

p a {

  color: #1ecd97;

}

p a:hover, p a:active {

  color: #07e5a0;

}

p a:visited {

  color: #36b68e;

}

کد JS

$(function(){

  

  //Create variables we will be referencing in our tweens.

  var white = ‘rgb(255,255,255)’;

  var seafoam = ‘rgb(30,205,151)’; 

  $buttonShapes = $(‘rect.btn-shape’);

  $buttonColorShape = $(‘rect.btn-shape.btn-color’);

  $buttonText = $(‘text.textNode’);

  $buttonCheck = $(‘text.checkNode’);

  

  //These are the button attributes which we will be tweening

  //This will be used with GSAP and the function below to tween

  var buttonProps = {

    buttonWidth : $buttonShapes.attr(‘width’),

    buttonX : $buttonShapes.attr(‘x’),

    buttonY : $buttonShapes.attr(‘y’),

    textScale : 1,

    textX : $buttonText.attr(‘x’),

    textY : $buttonText.attr(‘y’)

  };

  

  //This is the update handler that lets us tween attributes

  function onUpdateHandler(){

    $buttonShapes.attr(‘width’, buttonProps.buttonWidth);

    $buttonShapes.attr(‘x’, buttonProps.buttonX);

    $buttonShapes.attr(‘y’, buttonProps.buttonY);

    $buttonText.attr(‘transform’, “scale(” + buttonProps.textScale + “)”);

    $buttonText.attr(‘x’, buttonProps.textX);

    $buttonText.attr(‘y’, buttonProps.textY);

  }

  

  //Finally, create the timelines

  var hover_tl = new TimelineMax({

    tweens:[

      TweenMax.to( $buttonText, .15, { fill:white } ),

      TweenMax.to( $buttonShapes, .25, { fill: seafoam })

    ]

  });

  hover_tl.stop();

  

  var tl = new TimelineMax({onComplete:bind_mouseenter});

  //This is the initial transition, from [submit] to the circle

  tl.append( new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to( $buttonText, .15, { fillOpacity:0 } ),

      TweenMax.to( buttonProps, .25, { buttonX: (190-64)/2, buttonWidth:64, onUpdate:onUpdateHandler } ),

      TweenMax.to( $buttonShapes, .25, { fill: white })

    ],

    onComplete:function(){

      $buttonColorShape.css({

        ‘strokeDasharray’:202,

        ‘strokeDashoffset’:202

      });

    }

  }) );

  

  //The loading dasharray offset animation…

  tl.append(TweenMax.to($buttonColorShape, 1.2, {

    strokeDashoffset:0,

    ease:Quad.easeIn,

    onComplete:function(){

      //Reset these values to their defaults.

      $buttonColorShape.css({

        ‘strokeDasharray’:453,

        ‘strokeDashoffset’:0

      });

    }

  }));

  //The Finish – transition to check

  tl.append(new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to($buttonShapes, .3, {fill:seafoam}),

      TweenMax.to( $buttonCheck, .15, { fillOpacity:1 } ),

      TweenMax.to( buttonProps, .25, { buttonX: 3, buttonWidth:190, onUpdate:onUpdateHandler } )

    ]

  }));

  

  //The Reset – back to the beginning

  //For demo only – probably you would want to remove this.

  tl.append(TweenMax.to($buttonCheck, .1, {delay:1,fillOpacity:0}));

  tl.append(new TimelineMax({

    align:”start”,

    tweens:[

      TweenMax.to($buttonShapes, .3, {fill:white}),

      TweenMax.to($buttonText, .3, {fill:seafoam, fillOpacity:1})

    ],

    onComplete:function() {

      $(‘.colins-submit’).removeClass(‘is-active’);

    }

  }));

  tl.stop();

  

  //– On Click, we launch into the cool transition

  $(‘.colins-submit’).on(‘click’, function(e) {

    //– Add this class to indicate state

    $(e.currentTarget).addClass(‘is-active’);

    tl.restart();

    $(‘.colins-submit’).off(‘mouseenter’);

    $(‘.colins-submit’).off(‘mouseleave’);

  });

  

  bind_mouseenter();

  

  function bind_mouseenter() {

    $(‘.colins-submit’).on(‘mouseenter’, function(e) {

      hover_tl.restart();

      $(‘.colins-submit’).off(‘mouseenter’);

      bind_mouseleave();

    });

  }

  function bind_mouseleave() { 

    $(‘.colins-submit’).on(‘mouseleave’, function(e) {

      hover_tl.reverse();

      $(‘.colins-submit’).off(‘mouseleave’);

      bind_mouseenter();      

    });

  }

  

});

Flipside button .3 ( دکمه حذف کردن )

یک انیمیشن جالب برای حذف کردن چیزی که بسیار حرفه ای طراحی شده است و در هنگامی که شما بر روی آن کلیک می کنید یک تلنگر به شما میزند که مطمئن شود شما می خواهید فایل مورد نظر را حذف کنید.

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

کد HTML

<div class=”btn”>

  <div class=”btn-back”>

    <p>Are you sure you want to do that?</p>

    <button class=”yes”>Yes</button>

    <button class=”no”>No</button>

  </div>

  <div class=”btn-front”>Delete</div>

</div>

<p class=”description”>Try clicking different sides of the button – <a href=”http://lab.hakim.se/” target=“_blank”>lab.hakim.se</a></p>

کد CSS

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

html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

body {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  font-family: Roboto, “Helvetica Neue”, sans-serif;

  font-size: 18px;

  -webkit-perspective: 1000px;

          perspective: 1000px;

  background-color: #f5f5f5;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-pack: center;

  -webkit-justify-content: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;

}

.description {

  margin-top: 50px;

  text-align: center;

  color: #999;

  -webkit-transition: opacity 0.3s ease;

  transition: opacity 0.3s ease;

}

.description a {

  color: #4A9DF6;

  text-decoration: none;

}

.btn.is-open ~ .description {

  opacity: 0;

}

.btn {

  display: block;

  position: relative;

  width: 200px;

  height: 80px;

  -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-transform-origin: 50% 50%;

          transform-origin: 50% 50%;

  text-align: center;

}

.btn-front {

  position: absolute;

  display: block;

  width: 100%;

  height: 100%;

  line-height: 80px;

  background-color: #F44336;

  color: #fff;

  cursor: pointer;

  -webkit-backface-visibility: hidden;

          backface-visibility: hidden;

  -webkit-tap-highlight-color: transparent;

  -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

  transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

}

.btn-front:hover {

  background-color: #f77066;

}

.btn.is-open .btn-front {

  pointer-events: none;

  line-height: 160px;

}

.btn-back {

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #eee;

  color: #222;

  -webkit-transform: translateZ(-2px) rotateX(180deg);

          transform: translateZ(-2px) rotateX(180deg);

  overflow: hidden;

  -webkit-transition: box-shadow 0.8s ease;

  transition: box-shadow 0.8s ease;

}

.btn-back p {

  margin-top: 27px;

  margin-bottom: 25px;

}

.btn-back button {

  padding: 12px 20px;

  width: 30%;

  margin: 0 5px;

  background-color: transparent;

  border: 0;

  border-radius: 2px;

  font-size: 1em;

  cursor: pointer;

  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-transition: background 0.15s ease;

  transition: background 0.15s ease;

}

.btn-back button:focus {

  outline: 0;

}

.btn-back button.yes {

  background-color: #2196F3;

  color: #fff;

}

.btn-back button.yes:hover {

  background-color: #51adf6;

}

.btn-back button.no {

  color: #2196F3;

}

.btn-back button.no:hover {

  background-color: #ddd;

}

.btn.is-open .btn-back {

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

}

.btn[data-direction=”left”] .btn-back,

.btn[data-direction=”right”] .btn-back {

  -webkit-transform: translateZ(-2px) rotateY(180deg);

          transform: translateZ(-2px) rotateY(180deg);

}

.btn.is-open {

  width: 400px;

  height: 160px;

}

.btn[data-direction=”top”].is-open {

  -webkit-transform: rotateX(180deg);

          transform: rotateX(180deg);

}

.btn[data-direction=”right”].is-open {

  -webkit-transform: rotateY(180deg);

          transform: rotateY(180deg);

}

.btn[data-direction=”bottom”].is-open {

  -webkit-transform: rotateX(-180deg);

          transform: rotateX(-180deg);

}

.btn[data-direction=”left”].is-open {

  -webkit-transform: rotateY(-180deg);

          transform: rotateY(-180deg);

}

کد JS

var btn = document.querySelector( ‘.btn’ );

var btnFront = btn.querySelector( ‘.btn-front’ ),

    btnYes = btn.querySelector( ‘.btn-back .yes’ ),

    btnNo = btn.querySelector( ‘.btn-back .no’ );

btnFront.addEventListener( ‘click’, function( event ) {

  var mx = event.clientX – btn.offsetLeft,

      my = event.clientY – btn.offsetTop;

  var w = btn.offsetWidth,

      h = btn.offsetHeight;

  var directions = [

    { id: ‘top’, x: w/2, y: 0 },

    { id: ‘right’, x: w, y: h/2 },

    { id: ‘bottom’, x: w/2, y: h },

    { id: ‘left’, x: 0, y: h/2 }

  ];

  

  directions.sort( function( a, b ) {

    return distance( mx, my, a.x, a.y ) – distance( mx, my, b.x, b.y );

  } );

  

  btn.setAttribute( ‘data-direction’, directions.shift().id );

  btn.classList.add( ‘is-open’ );

} );

btnYes.addEventListener( ‘click’, function( event ) {

  btn.classList.remove( ‘is-open’ );

} );

btnNo.addEventListener( ‘click’, function( event ) {

  btn.classList.remove( ‘is-open’ );

} );

function distance( x1, y1, x2, y2 ) {

  var dx = x1-x2;

  var dy = y1-y2;

  return Math.sqrt( dx*dx + dy*dy );

}

با تشکر از همراهی شما

_________________________________________________

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

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

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