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

admin
>دسته بندی: آموزشی, انیمیشن, برنامه نویسی, طراحی وب
برچسب ها: انیمیشن, باید, ببینید, برنامه نویسی, جالب, چند, سوم, شما, طراحی وب, قسمت
۱۳۹۵/۰۴/۰۷

چند انیمیشن جالب با 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 کد ها را وارد کرده و آن ها را اجرا کنید و می توانید در قسمت پایینی این سایت انیمیشن را تماشا کنید.

The Avenger.1 ( انتقام جویان )

شما می تواندخشم هالک را وقتی دست های خود را تکان می دهد از طریق صفحه نمایش تصور کنید؟ باحاله مگه نه؟

شخصیت های دیگری مثل ثور و مرد آهنی و کاپیتان آمریکایی هم در کنار هالک حضور دارند.

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

کد HTML

</div>

</div>

</div>

</div>

</div>

کد CSS

*, *:before, *:after {

box-sizing: border-box;

}

body {

font-size: 16px;

position: absolute;

width: 100%;

height: 100%;

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

}

.wrapper {

position: relative;

width: 550px;

height: 365px;

margin: 15% auto;

-webkit-animation: shake 7s infinite;

animation: shake 7s infinite;

}

.hulk {

position: absolute;

margin-left: 200px;

bottom: 0px;

margin-bottom: 300px;

}

.hulk .head {

width: 4.713em;

position: absolute;

margin-top: -2.75em;

margin-left: 3.563em;

border-bottom: 3.75em solid #bdbd00;

border-left: 0.938em solid transparent;

border-right: 0.938em solid transparent;

height: 0;

z-index: 10;

}

.hulk .head::after {

content: “”;

width: 2.25em;

height: 0.375em;

position: absolute;

margin-top: 0.538em;

margin-left: 0.313em;

background: #034600;

}

.hulk .head::before {

content: “”;

width: 3.25em;

height: 0.75em;

position: absolute;

margin-top: -0.75em;

margin-left: -0.25em;

background: #034600;

border-top-left-radius: 1.875em;

border-top-right-radius: 1.875em;

}

.hulk .mouth {

width: 31px;

height: 0px;

position: absolute;

margin-top: 25px;

margin-left: 8px;

overflow: hidden;

background-image: -webkit-linear-gradient(top, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00 70%, #ffffff 75%, #ffffff 100%);

background-image: linear-gradient(to bottom, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00 70%, #ffffff 75%, #ffffff 100%);

border-top-left-radius: 0.5em;

border-top-right-radius: 0.5em;

-webkit-animation: mouthOpen 7s infinite;

animation: mouthOpen 7s infinite;

}

.hulk .mouth::before {

content: “”;

width: 10px;

height: 7px;

position: absolute;

background: #902e2b;

margin-top: 9px;

margin-left: 11px;

border-top-left-radius: 0.5em;

border-top-right-radius: 0.5em;

}

.hulk .right-arm {

width: 13.313em;

height: 13.75em;

margin-top: 1em;

margin-left: 2em;

border-radius: 50%;

background: #b5b500;

position: absolute;

clip: rect(-1em, 11.2em, 12.55em, 7.625em);

-webkit-animation: hulkRightarm 7s infinite;

animation: hulkRightarm 7s infinite;

}

.hulk .right-arm::after {

content: “”;

width: 12.063em;

height: 9.625em;

border-radius: 50%;

background: white;

position: absolute;

-webkit-transform: translateY(1.25em);

transform: translateY(1.25em);

margin-left: -3.313em;

}

.hulk .left-arm {

width: 13.313em;

height: 13.75em;

margin-top: 1em;

margin-left: -4.3em;

border-radius: 50%;

background: #949400;

position: absolute;

clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);

-webkit-animation: hulkLeftarm 7s infinite;

animation: hulkLeftarm 7s infinite;

}

.hulk .left-arm::after {

content: “”;

width: 12.063em;

height: 9.625em;

border-radius: 50%;

background: white;

position: absolute;

-webkit-transform: translateY(1.25em);

transform: translateY(1.25em);

margin-left: 4.563em;

}

.hulk .fist {

width: 4.375em;

height: 4.375em;

position: absolute;

border-radius: 50%;

margin-top: 11.7em;

margin-left: -2.1em;

background: #949400;

box-shadow: 11.1em 0 0 #b5b500;

z-index: 10;

-webkit-animation: hulkHands 7s infinite;

animation: hulkHands 7s infinite;

}

.hulk .body {

width: 12.5em;

height: 12.5em;

background: #bdbd00;

border-radius: 50%;

position: absolute;

box-shadow: inset 1.125em 0 0 #a4a400, -0.938em 0 0 #8a8a00;

z-index: 10;

}

.hulk .body::before {

content: “”;

width: 0.75em;

height: 0.75em;

border-radius: 50%;

position: absolute;

margin-top: 3.125em;

margin-left: 1.375em;

background: #8a8a00;

box-shadow: 7.625em 0 0 #8a8a00;

}

.hulk .body::after {

content: “”;

position: absolute;

width: 0.313em;

height: 0.313em;

border-radius: 50%;

margin-top: 10em;

margin-left: 5.625em;

background: #8a8a00;

box-shadow: 0 2.625em 0 #9ac7f1;

}

.hulk .right-leg {

width: 0.625em;

height: 6.438em;

position: absolute;

margin-left: 4.25em;

margin-top: 12.3em;

background-image: -webkit-linear-gradient(top, #2e0e62, #2e0e62 50%, #575700 50%, #575700 100%);

background-image: linear-gradient(to bottom, #2e0e62, #2e0e62 50%, #575700 50%, #575700 100%);

-webkit-animation: hulkPants2 7s infinite;

animation: hulkPants2 7s infinite;

}

.hulk .right-leg::after {

content: “”;

width: 0.938em;

height: 0.875em;

position: absolute;

margin-left: 0.625em;

background: #43158e;

}

.hulk .right-leg::before {

content: “”;

width: 1.125em;

height: 0.188em;

position: absolute;

margin-top: 6.25em;

margin-left: -1.125em;

background: #575700;

}

.hulk .left-leg {

width: 0.625em;

height: 6.438em;

position: absolute;

margin-left: 6.688em;

margin-top: 12.3em;

background-image: -webkit-linear-gradient(top, #581bbb, #581bbb 50%, #bdbd00 50%, #bdbd00 100%);

background-image: linear-gradient(to bottom, #581bbb, #581bbb 50%, #bdbd00 50%, #bdbd00 100%);

-webkit-animation: hulkPants 7s infinite;

animation: hulkPants 7s infinite;

}

.hulk .left-leg::after {

content: “”;

width: 0.938em;

height: 0.875em;

position: absolute;

background: #581bbb;

margin-left: -0.938em;

}

.hulk .left-leg::before {

content: “”;

width: 1.125em;

height: 0.188em;

position: absolute;

margin-top: 6.25em;

margin-left: 0.625em;

background: #bdbd00;

}

.captain {

position: absolute;

z-index: 1000;

margin-left: 355px;

bottom: 0px;

margin-bottom: 146px;

}

.captain .head {

width: 21px;

height: 36px;

background: #43abf0;

position: absolute;

margin-top: -36px;

margin-left: 44px;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

color: #fff;

text-align: center;

font-size: 0.6em;

font-weight: bold;

}

.captain .head::before {

content: “”;

width: 21px;

height: 17px;

background: #fdb0a4;

position: absolute;

margin-left: -7px;

margin-top: 19px;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

box-shadow: inset 8px 0 0 0 #fc9a8b;

}

.captain .head::after {

content: “”;

width: 4px;

height: 4px;

position: absolute;

background: #fdb0a4;

border-radius: 50%;

margin-top: 16px;

margin-left: -5px;

}

.captain .body {

height: 53px;

width: 107px;

border-radius: 0 0 110px 110px;

background: #43abf0;

box-shadow: inset 8px 0px 0 0 #29708f, inset 17px 0px 0 0 #35a5ef;

z-index: 5;

}

.captain .body::before {

content: “”;

width: 133px;

height: 30px;

margin-left: -14px;

position: absolute;

border-radius: 30px;

z-index: -1;

}

.captain .body::after {

content: ”;

width: 30px;

height: 10px;

position: absolute;

margin-top: 49px;

margin-left: 38px;

background-image: -webkit-linear-gradient(left, #9d2f00, #9d2f00 30%, #ffffcb 30%, #ffffcb 70%, #b63700 70%, #b63700 100%);

background-image: linear-gradient(to right, #9d2f00, #9d2f00 30%, #ffffcb 30%, #ffffcb 70%, #b63700 70%, #b63700 100%);

}

.captain .body .star {

display: block;

color: #fff;

width: 0px;

height: 0px;

border-right: 10px solid transparent;

border-bottom: 7px solid #fff;

border-left: 10px solid transparent;

margin-top: 18px;

margin-left: 43px;

position: absolute;

-webkit-transform: rotate(35deg);

transform: rotate(35deg);

}

.captain .body .star::before {

border-bottom: 8px solid #fff;

border-left: 3px solid transparent;

border-right: 3px solid transparent;

position: relative;

height: 0;

width: 0;

top: -4px;

left: -6px;

display: block;

content: ”;

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

transform: rotate(-35deg);

}

.captain .body .star::after {

position: absolute;

display: block;

color: red;

top: 0px;

left: -10px;

width: 0px;

height: 0px;

border-right: 10px solid transparent;

border-bottom: 7px solid #fff;

border-left: 10px solid transparent;

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

transform: rotate(-70deg);

content: ”;

}

.captain .arms {

width: 10px;

height: 60px;

position: absolute;

background: #ffffcb;

margin-top: -30px;

margin-left: 10px;

box-shadow: 75px 0 0 0 #ffffcb;

z-index: -1;

}

.captain .arms::before {

content: “”;

width: 28px;

height: 50px;

position: absolute;

background: #ffffcb;

border-radius: 30% 50%;

margin-left: -18px;

margin-top: -3px;

box-shadow: 95px 0 0 0 #ffffcb;

}

.captain .shield {

width: 40px;

height: 40px;

background: #43abf0;

border-radius: 50%;

position: absolute;

z-index: 100;

margin-left: 75px;

margin-top: 30px;

box-shadow: 0 0 0 8px #ffffcb, 0 0 0 18px #c53905;

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

transform: rotate(-30deg);

}

.captain .shield .star {

display: block;

color: #fff;

width: 0px;

height: 0px;

border-right: 10px solid transparent;

border-bottom: 7px solid #fff;

border-left: 10px solid transparent;

margin-top: 15px;

margin-left: 10px;

position: absolute;

-webkit-transform: rotate(35deg);

transform: rotate(35deg);

}

.captain .shield .star::before {

border-bottom: 8px solid #fff;

border-left: 3px solid transparent;

border-right: 3px solid transparent;

position: relative;

height: 0;

width: 0;

top: -4px;

left: -6px;

display: block;

content: ”;

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

transform: rotate(-35deg);

}

.captain .shield .star::after {

position: absolute;

display: block;

color: red;

top: 0px;

left: -10px;

width: 0px;

height: 0px;

border-right: 10px solid transparent;

border-bottom: 7px solid #fff;

border-left: 10px solid transparent;

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

transform: rotate(-70deg);

content: ”;

}

.captain .hands {

width: 15px;

height: 30px;

position: absolute;

margin-top: 29px;

margin-left: 8px;

background: #a73200;

-webkit-transform: skew(10deg);

transform: skew(10deg);

}

.captain .hands::before {

content: “”;

width: 10px;

height: 30px;

background: #b3b300;

position: absolute;

margin-left: 12px;

-webkit-transform: skew(-10deg);

transform: skew(-10deg);

}

.captain .hands::after {

content: “”;

width: 13px;

height: 13px;

border-radius: 50%;

position: absolute;

margin-top: 21px;

margin-left: -1px;

background: #a73200;

}

.captain .legs {

width: 8px;

height: 100px;

background: #29708f;

position: absolute;

margin-left: 38px;

margin-top: 5px;

box-shadow: 22px 0 0 0 #43abf0;

}

.captain .legs::before {

content: “”;

width: 30px;

height: 5px;

background: #501800;

position: absolute;

}

.captain .legs::after {

content: “”;

width: 14px;

height: 9px;

position: absolute;

margin-left: 8px;

margin-top: 5px;

}

.captain .boots {

width: 10px;

height: 41px;

position: absolute;

margin-top: 105px;

margin-left: 37px;

background: #832800;

box-shadow: 22px 0 0 0 #b63700;

}

.captain .boots::after {

content: “”;

width: 25px;

height: 2px;

position: absolute;

background: #832800;

margin-top: 39px;

margin-left: -15px;

box-shadow: 40px 0 0 0 #b63700;

}

.captain .boots::before {

content: “”;

width: 18px;

height: 12px;

background: #832800;

position: absolute;

margin-left: -4px;

box-shadow: 22px 0 0 0 #b63700;

}

.ironman {

position: absolute;

z-index: 900;

margin-left: 0;

margin-bottom: 135px;

bottom: 0;

}

.ironman .helmet {

width: 22px;

height: 34px;

background: #ab3300;

position: absolute;

margin-top: -33px;

margin-left: 44px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

overflow: hidden;

}

.ironman .helmet::before {

content: “”;

width: 7px;

height: 2px;

background: white;

position: absolute;

margin-top: 10px;

margin-left: 0px;

z-index: 3;

box-shadow: 15px 0 0 0 white;

}

.ironman .mask {

width: 10px;

height: 18px;

background: #deb800;

position: relative;

margin-top: 7px;

margin-left: 6px;

}

.ironman .mask::before {

content: “”;

width: 13px;

height: 18px;

background: #deb800;

position: absolute;

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

margin-top: -3px;

margin-left: 4px;

}

.ironman .mask::after {

content: “”;

width: 13px;

height: 18px;

background: #deb800;

position: absolute;

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

transform: rotate(-60deg);

margin-top: -3px;

margin-left: -5px;

}

.ironman .body {

height: 53px;

width: 107px;

border-radius: 0 0 110px 110px;

background: #ab3300;

box-shadow: inset 10px 0px 0 0 #922b00, inset 20px 0px 0 0 #9c2e00;

padding-top: 11px;

z-index: 50;

}

.ironman .body::before {

content: “”;

width: 32px;

height: 32px;

background: #922b00;

position: absolute;

border-radius: 50%;

margin-left: -15px;

margin-top: -18px;

box-shadow: 105px 0 0 0 #ab3300;

z-index: 50;

}

.ironman .body::after {

content: “”;

width: 40px;

height: 30px;

position: absolute;

margin-top: 20px;

margin-left: 35px;

background-image: -webkit-linear-gradient(left, #922b00, #922b00 15%, #9c2e00 15%, #9c2e00 29%, #ab3300 20%, #ab3300 20%);

background-image: linear-gradient(to right, #922b00, #922b00 15%, #9c2e00 15%, #9c2e00 29%, #ab3300 20%, #ab3300 20%);

}

.ironman .power {

width: 17px;

height: 17px;

background: white;

border-radius: 50%;

margin: 0 auto;

box-shadow: 0 0 0 5px #deb800;

}

.ironman .left-leg {

width: 10px;

height: 90px;

background: #c98700;

position: absolute;

margin-left: 35px;

margin-top: 12px;

border-top-right-radius: 10px;

}

.ironman .left-leg::before {

content: “”;

width: 25px;

height: 65px;

background: #922b00;

position: absolute;

border-top-right-radius: 20px;

margin-top: 60px;

margin-left: -10px;

}

.ironman .right-leg {

width: 10px;

height: 90px;

background: #deb800;

position: absolute;

margin-left: 65px;

margin-top: 12px;

border-top-left-radius: 10px;

}

.ironman .right-leg::before {

content: “”;

width: 25px;

height: 65px;

background: #ab3300;

position: absolute;

border-top-left-radius: 20px;

margin-top: 60px;

margin-left: -5px;

}

.ironman .left-arm {

width: 10px;

height: 45px;

background: #c98700;

position: absolute;

margin-left: -6px;

margin-top: 18px;

border-bottom-left-radius: 20px;

}

.ironman .left-arm::before {

content: “”;

height: 60px;

width: 31px;

border-radius: 60px 0px 0px 60px;

background: #922b00;

position: absolute;

margin-top: 30px;

margin-left: -21px;

z-index: -1;

}

.ironman .left-arm::after {

content: “”;

width: 10px;

height: 10px;

border-radius: 50%;

background: #922b00;

position: absolute;

margin-top: 80px;

margin-left: 5px;

}

.ironman .right-arm {

width: 10px;

height: 45px;

background: #c98700;

position: absolute;

margin-left: 105px;

margin-top: 18px;

border-bottom-right-radius: 20px;

}

.ironman .right-arm::before {

content: “”;

height: 60px;

width: 31px;

border-radius: 0px 60px 60px 0px;

background: #ab3300;

position: absolute;

margin-top: 30px;

margin-left: 0px;

z-index: -1;

}

.ironman .right-arm::after {

content: “”;

width: 10px;

height: 10px;

border-radius: 50%;

background: #ab3300;

position: absolute;

margin-top: 80px;

margin-left: -5px;

}

.thor {

position: absolute;

margin-left: 118px;

z-index: 1000;

margin-bottom: 220px;

bottom: 0;

}

.thor .helmet {

width: 0;

height: 0;

position: absolute;

border-left: 18px solid transparent;

border-right: 18px solid transparent;

border-bottom: 40px solid #d7a900;

margin-top: -40px;

margin-left: 42px;

box-shadow: 0 -18px 0 -16px #66999a;

}

.thor .helmet::before {

content: “”;

width: 13px;

height: 25px;

position: absolute;

background: #66999a;

margin-left: -19px;

margin-top: -12px;

border-bottom-left-radius: 10px;

border-top-right-radius: 15px;

box-shadow: inset -3px 0px 0 transparent;

}

.thor .helmet::after {

content: “”;

width: 13px;

height: 25px;

position: absolute;

background: #89b9ef;

margin-left: 10px;

margin-top: -12px;

border-bottom-right-radius: 10px;

border-top-left-radius: 15px;

box-shadow: inset -3px 0px 0 transparent;

}

.thor .head {

width: 21px;

height: 40px;

position: absolute;

margin-top: -40px;

margin-left: 50px;

border-radius: 30px 30px 0 0;

overflow: hidden;

}

.thor .head::after {

content: “”;

width: 10px;

height: 17px;

background: #d7a900;

position: absolute;

border-radius: 10px 10px 0px 0px;

margin-top: 20px;

margin-left: 5px;

}

.thor .head .beard {

width: 21px;

height: 5px;

background: #d7a900;

position: absolute;

margin-top: 12px;

}

.thor .head .beard::before {

content: “”;

width: 11px;

height: 5px;

background: #d7a900;

position: absolute;

margin-left: 12px;

margin-top: 17px;

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

transform: rotate(-40deg);

}

.thor .head .beard::after {

content: “”;

width: 11px;

height: 5px;

background: #d7a900;

position: absolute;

margin-left: -3px;

margin-top: 17px;

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

.thor .body {

border-top: 65px solid #004278;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

height: 0;

width: 120px;

position: absolute;

}

.thor .body::before {

content: “”;

width: 40px;

height: 5px;

position: absolute;

}

.thor .body::after {

content: “”;

width: 30px;

height: 30px;

border-radius: 50%;

position: absolute;

background: #94bdef;

margin-top: -60px;

margin-left: -17px;

box-shadow: 45px 0 0 0 #94bdef, 10px 29px 0 -5px #94bdef, 35px 29px 0 -5px #94bdef;

}

.thor .arm-right {

width: 40px;

height: 40px;

background: #ffcee7;

border-radius: 50%;

position: absolute;

margin-left: 100px;

box-shadow: -5px 0 0 #ffcee7, -10px 0 0 #ffcee7, -15px 0 0 #ffcee7, -20px 0 0 #ffcee7, -20px 90px 0 -15px #ffcee7, -20px 95px 0 -15px #ffcee7, -20px 100px 0 -15px #ffcee7;

}

.thor .arm-right::before {

content: “”;

width: 40px;

height: 100px;

position: absolute;

background: #ffcee7;

margin-left: -5px;

margin-top: 10px;

border-bottom-right-radius: 30px;

}

.thor .arm-right::after {

content: “”;

width: 10px;

height: 5px;

background: #290000;

position: absolute;

margin-top: 113px;

margin-left: -5px;

}

.thor .arm-left {

width: 40px;

height: 40px;

background: #ffc688;

border-radius: 50%;

position: absolute;

margin-left: 0px;

box-shadow: -5px 0 0 #ffc688, -10px 0 0 #ffc688, -15px 0 0 #ffc688, -20px 0 0 #ffc688, 0 90px 0 -15px #ffc688, 0 95px 0 -15px #ffc688, 0 100px 0 -15px #ffc688;

}

.thor .arm-left::before {

content: “”;

width: 40px;

height: 100px;

position: absolute;

background: #ffc688;

margin-left: -15px;

margin-top: 10px;

border-bottom-left-radius: 30px;

}

.thor .arm-left::after {

content: “”;

width: 10px;

height: 5px;

background: #290000;

position: absolute;

margin-top: 113px;

margin-left: 15px;

}

.thor .legs {

width: 13px;

height: 67px;

background: #002e54;

position: absolute;

margin-top: 70px;

left: 40px;

border-radius: 0 0 30px 30px;

box-shadow: 27px 0 0 0 #004278;

}

.thor .legs::before {

content: “”;

width: 10px;

height: 75px;

position: absolute;

background: #002e54;

margin-left: 5px;

box-shadow: 0 75px 0 0 #b75600, 21px 0 0 0 #004278, 21px 75px 0 0 #ce9700;

}

.thor .legs::after {

content: “”;

width: 11px;

height: 10px;

position: absolute;

margin-left: 15px;

}

.thor .cap {

width: 120px;

height: 200px;

position: absolute;

background: #a72300;

z-index: 0;

box-shadow: inset 10px 0 0 #721200, inset 20px 0 0 #7b1e00;

}

.thor .hammer {

width: 42px;

height: 27px;

position: absolute;

background: #382727;

/* fallback */

background: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 5px, #382727 0%) top left, -webkit-linear-gradient(225deg, rgba(0, 0, 0, 0) 5px, #382727 0%) top right, -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0) 5px, #382727 0%) bottom right, -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 5px, #382727 0%) bottom left;

background: linear-gradient(135deg, rgba(0, 0, 0, 0) 5px, #382727 0%) top left, linear-gradient(225deg, rgba(0, 0, 0, 0) 5px, #382727 0%) top right, linear-gradient(315deg, rgba(0, 0, 0, 0) 5px, #382727 0%) bottom right, linear-gradient(45deg, rgba(0, 0, 0, 0) 5px, #382727 0%) bottom left;

background-size: 52% 52%;

background-repeat: no-repeat;

margin-top: 148px;

margin-left: 1px;

}

.thor .hammer::before {

content: “”;

width: 6px;

height: 25px;

background: #291d1d;

position: absolute;

margin-top: -23px;

margin-left: 18px;

}

.thor .hammer::after {

content: “”;

width: 6px;

height: 3px;

position: absolute;

background: #291d1d;

margin-top: 25px;

margin-left: 18px;

}

.thor .feet {

width: 25px;

height: 2px;

position: absolute;

background: #b75600;

margin-top: 220px;

margin-left: 30px;

box-shadow: 36px 0 0 #ce9700;

}

.thor .feet::after {

content: “”;

height: 10px;

width: 20px;

position: absolute;

border-radius: 90px 90px 0 0;

background: #ce9700;

margin-top: -85px;

margin-left: 8px;

box-shadow: 24px 0 0 #b75600;

}

.awwwards {

position: absolute;

top: 30px;

left: 70px;

}

.awwwards a {

color: #ab3300;

text-decoration: none;

border-bottom: 1px solid #ab3300;

}

/*Hand Animation*/

@-webkit-keyframes shake {

۷۸%, ۸۰%,۸۲%,۸۴%,۸۶%,۸۸%,۹۰%,۹۲% {

top: 3px;

left: 2px;

}

۷۹%,۸۱%,۸۳%,۸۵%,۸۷%,۸۹%,۹۱% {

top: 0px;

left: -2px;

}

@keyframes shake {

۷۸%, ۸۰%,۸۲%,۸۴%,۸۶%,۸۸%,۹۰%,۹۲% {

top: 3px;

left: 2px;

}

۷۹%,۸۱%,۸۳%,۸۵%,۸۷%,۸۹%,۹۱% {

top: 0px;

left: -2px;

}

@-webkit-keyframes mouthOpen {

۷۷% {

height: 0px;

}

۸۰% {

height: 22px;

}

۹۳% {

height: 22px;

opacity: 1;

}

۹۵% {

height: 0px;

opacity: 0;

}

@keyframes mouthOpen {

۷۷% {

height: 0px;

}

۸۰% {

height: 22px;

}

۹۳% {

height: 22px;

opacity: 1;

}

۹۵% {

height: 0px;

opacity: 0;

}

@-webkit-keyframes hulkHands {

۶% {

box-shadow: 11.1em 0 0 #b5b500;

}

۷۷% {

box-shadow: 11.1em 0 0 #b5b500;

margin-left: -2.1em;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

۸۰% {

margin-left: 0.5em;

box-shadow: 8.5em 0 0 #b5b500;

-webkit-transform: translate(-0.9em, -19.9em);

transform: translate(-0.9em, -19.9em);

}

۹۳% {

margin-left: 0.5em;

box-shadow: 8.5em 0 0 #b5b500;

-webkit-transform: translate(-0.9em, -19.9em);

transform: translate(-0.9em, -19.9em);

}

۹۴% {

box-shadow: 11.1em 0 0 #b5b500;

margin-left: -2.1em;

-webkit-transform: translate(0em, 0em);

transform: translate(0em, 0em);

}

@keyframes hulkHands {

۶% {

box-shadow: 11.1em 0 0 #b5b500;

}

۷۷% {

box-shadow: 11.1em 0 0 #b5b500;

margin-left: -2.1em;

-webkit-transform: translate(0, 0);

transform: translate(0, 0);

}

۸۰% {

margin-left: 0.5em;

box-shadow: 8.5em 0 0 #b5b500;

-webkit-transform: translate(-0.9em, -19.9em);

transform: translate(-0.9em, -19.9em);

}

۹۳% {

margin-left: 0.5em;

box-shadow: 8.5em 0 0 #b5b500;

-webkit-transform: translate(-0.9em, -19.9em);

transform: translate(-0.9em, -19.9em);

}

۹۴% {

box-shadow: 11.1em 0 0 #b5b500;

margin-left: -2.1em;

-webkit-transform: translate(0em, 0em);

transform: translate(0em, 0em);

}

@-webkit-keyframes hulkRightarm {

۷۷% {

margin-top: 1em;

margin-left: 2em;

clip: rect(-1em, 11.2em, 12.55em, 7.625em);

}

۸۰% {

margin-top: -8.125em;

margin-left: 2.5em;

clip: rect(0.563em, 13.363em, 13.75em, 6.625em);

}

۹۳% {

margin-top: -8.125em;

margin-left: 2.5em;

clip: rect(0.563em, 13.363em, 13.75em, 6.625em);

}

۹۵% {

margin-top: 1em;

margin-left: 2em;

clip: rect(-1em, 11.2em, 12.55em, 7.625em);

}

@keyframes hulkRightarm {

۷۷% {

margin-top: 1em;

margin-left: 2em;

clip: rect(-1em, 11.2em, 12.55em, 7.625em);

}

۸۰% {

margin-top: -8.125em;

margin-left: 2.5em;

clip: rect(0.563em, 13.363em, 13.75em, 6.625em);

}

۹۳% {

margin-top: -8.125em;

margin-left: 2.5em;

clip: rect(0.563em, 13.363em, 13.75em, 6.625em);

}

۹۵% {

margin-top: 1em;

margin-left: 2em;

clip: rect(-1em, 11.2em, 12.55em, 7.625em);

}

@-webkit-keyframes hulkLeftarm {

۷۷% {

margin-top: 1em;

margin-left: -4.3em;

clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);

}

۸۰% {

margin-top: -8.125em;

margin-left: -4.375em;

clip: rect(-0.188em, 6.563em, 13.875em, 0em);

}

۹۳% {

margin-top: -8.125em;

margin-left: -4.375em;

clip: rect(-0.188em, 6.563em, 13.875em, 0em);

}

۹۵% {

margin-top: 1em;

margin-left: -4.3em;

clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);

}

@keyframes hulkLeftarm {

۷۷% {

margin-top: 1em;

margin-left: -4.3em;

clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);

}

۸۰% {

margin-top: -8.125em;

margin-left: -4.375em;

clip: rect(-0.188em, 6.563em, 13.875em, 0em);

}

۹۳% {

margin-top: -8.125em;

margin-left: -4.375em;

clip: rect(-0.188em, 6.563em, 13.875em, 0em);

}

۹۵% {

margin-top: 1em;

margin-left: -4.3em;

clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);

}

.footer–love {

position: absolute;

right: 1.5rem;

bottom: 2.5rem;

font-size: 0.85rem;

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

z-index: 9999;

}

.footer–love .love-heart {

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg);

width: 16px;

height: 16px;

display: inline-block;

margin: 0 5px 0 2px;

vertical-align: top;

}

.footer–love a {

color: #43abf0;

}

CSS Mars Landing.2 ( فرود CSS بر روی مریخ!!! )

ما در مریخ فرود آمدیم. باورتان نمی شود انیمیشن زیر را امتحان کنید.

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

کد HTML

</div>

</div>

</div>

</div>

کد CSS

.space {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #435d70;

overflow: hidden;

}

.space .mars {

position: absolute;

top: 50%;

left: 50%;

z-index: 2;

}

.space .mars .tentacle {

position: absolute;

top: -60px;

right: -80px;

z-index: 1;

height: 70px;

width: 70px;

box-sizing: border-box;

border-radius: 100%;

border-left: 15px solid #1aae1e;

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

transform: rotate(-30deg);

-webkit-animation: tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.space .mars .flag {

position: absolute;

height: 17px;

width: 15px;

top: -57px;

left: -1px;

-webkit-animation: flag-pole 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: flag-pole 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.space .mars .flag:before {

content: “”;

position: absolute;

height: 17px;

width: 2px;

background: #eee;

}

.space .mars .flag:after {

content: “”;

position: absolute;

height: 10px;

width: 14px;

left: 2px;

top: 0;

background: #aaa;

-webkit-animation: flag-unfurl 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: flag-unfurl 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.space .mars .flag .small-tentacle {

position: absolute;

left: -16px;

top: 3px;

height: 50px;

width: 50px;

border-left: 10px solid #1aae1e;

border-radius: 100%;

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

-webkit-animation: small-tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: small-tentacle 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

z-index: 2;

}

.space .mars:before {

content: “”;

position: absolute;

top: 80px;

left: -30px;

height: 10px;

width: 60px;

background: rgba(0, 0, 0, 0.2);

background: #374d5c;

border-radius: 100%;

}

.space .mars .planet {

box-sizing: border-box;

position: absolute;

border-radius: 100%;

height: 120px;

width: 120px;

overflow: hidden;

margin-left: -60px;

margin-top: -60px;

z-index: 2;

}

.space .mars .planet .surface {

position: absolute;

border-radius: 100%;

height: 140%;

width: 140%;

top: -30%;

right: -10%;

box-sizing: border-box;

border: 30px solid rgba(0, 0, 0, 0.15);

background: #ff5f40;

}

.space .mars .planet .crater1,

.space .mars .planet .crater2,

.space .mars .planet .crater3 {

position: absolute;

border-radius: 100%;

background: rgba(0, 0, 0, 0.15);

box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.2);

}

.space .mars .planet .crater1 {

height: 20px;

width: 20px;

top: 32%;

left: 17%;

}

.space .mars .planet .crater2 {

height: 10px;

width: 10px;

top: 26%;

left: 55%;

box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);

}

.space .mars .planet .crater3 {

height: 10px;

width: 10px;

top: 60%;

left: 40%;

box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);

}

.space .ship {

position: absolute;

right: 50%;

top: 50%;

margin-top: -55px;

margin-right: -55px;

height: 22px;

background: rgba(0, 0, 0, 0.1);

-webkit-transform-origin: 0% 100% 0;

transform-origin: 0% 100% 0;

z-index: 1;

-webkit-animation: ship 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: ship 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.space .ship .ship-rotate {

position: absolute;

height: 22px;

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

transform: rotate(-110deg);

-webkit-animation: ship-rotate 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: ship-rotate 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

.space .ship .pod {

position: absolute;

top: 0;

left: -8px;

height: 16px;

width: 16px;

background: #eee;

border-radius: 100% 0 100% 0;

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

transform: rotate(-45deg);

}

.space .ship .fuselage {

position: absolute;

top: 14px;

left: -6px;

height: 8px;

width: 12px;

background: #eee;

border-radius: 100% 100% 0 0;

}

.space .ship .fuselage:after {

content: “”;

position: absolute;

left: 2px;

top: 100%;

width: 0;

height: 0;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-top: 6px solid red;

}

.space .ship-shadow {

position: absolute;

right: 10%;

top: 50%;

margin-right: -28px;

margin-top: 83px;

height: 4px;

width: 16px;

background: #374d5c;

border-radius: 100%;

-webkit-animation: ship-shadow 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

animation: ship-shadow 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;

}

@-webkit-keyframes small-tentacle {

۰% {

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

transform: rotate(-60deg);

}

۸۶% {

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

transform: rotate(-60deg);

}

۸۹% {

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

۱۰۰% {

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

@keyframes small-tentacle {

۰% {

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

transform: rotate(-60deg);

}

۸۶% {

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

transform: rotate(-60deg);

}

۸۹% {

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

۱۰۰% {

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

@-webkit-keyframes tentacle {

۰% {

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

transform: rotate(-30deg);

}

۷۵% {

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

transform: rotate(-30deg);

}

۸۰% {

-webkit-transform: rotate(-165deg) translate(6px, 8px);

transform: rotate(-165deg) translate(6px, 8px);

}

۸۲٫۵% {

-webkit-transform: rotate(-165deg) translate(28px, -17px);

transform: rotate(-165deg) translate(28px, -17px);

}

۱۰۰% {

-webkit-transform: rotate(-165deg) translate(35px, -22px);

transform: rotate(-165deg) translate(35px, -22px);

}

@keyframes tentacle {

۰% {

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

transform: rotate(-30deg);

}

۷۵% {

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

transform: rotate(-30deg);

}

۸۰% {

-webkit-transform: rotate(-165deg) translate(6px, 8px);

transform: rotate(-165deg) translate(6px, 8px);

}

۸۲٫۵% {

-webkit-transform: rotate(-165deg) translate(28px, -17px);

transform: rotate(-165deg) translate(28px, -17px);

}

۱۰۰% {

-webkit-transform: rotate(-165deg) translate(35px, -22px);

transform: rotate(-165deg) translate(35px, -22px);

}

@-webkit-keyframes ship {

۰% {

right: -10%;

top: -10%;

margin-top: -55px;

margin-right: -55px;

}

۴۰% {

right: 50%;

top: 50%;

}

۷۹٫۵% {

margin-top: -55px;

margin-right: -55px;

}

۸۴% {

margin-top: -20px;

margin-right: 0px;

}

۱۰۰% {

right: 50%;

top: 50%;

margin-top: 0px;

margin-right: 0px;

}

@keyframes ship {

۰% {

right: -10%;

top: -10%;

margin-top: -55px;

margin-right: -55px;

}

۴۰% {

right: 50%;

top: 50%;

}

۷۹٫۵% {

margin-top: -55px;

margin-right: -55px;

}

۸۴% {

margin-top: -20px;

margin-right: 0px;

}

۱۰۰% {

right: 50%;

top: 50%;

margin-top: 0px;

margin-right: 0px;

}

@-webkit-keyframes ship-rotate {

۰% {

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

transform: rotate(-110deg);

}

۲۰% {

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

transform: rotate(-110deg);

}

۳۴% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

۷۹% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

۱۰۰% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

@keyframes ship-rotate {

۰% {

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

transform: rotate(-110deg);

}

۲۰% {

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

transform: rotate(-110deg);

}

۳۴% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

۷۹% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

۱۰۰% {

-webkit-transform: rotate(47deg);

transform: rotate(47deg);

}

@-webkit-keyframes ship-shadow {

۰% {

right: -10%;

-webkit-transform: scale(1.4, 1);

transform: scale(1.4, 1);

opacity: .3;

}

۴۰% {

right: 50%;

-webkit-transform: scale(0.75, 1);

transform: scale(0.75, 1);

opacity: 1;

}

۱۰۰% {

right: 50%;

}

@keyframes ship-shadow {

۰% {

right: -10%;

-webkit-transform: scale(1.4, 1);

transform: scale(1.4, 1);

opacity: .3;

}

۴۰% {

right: 50%;

-webkit-transform: scale(0.75, 1);

transform: scale(0.75, 1);

opacity: 1;

}

۱۰۰% {

right: 50%;

}

@-webkit-keyframes planet-bump {

۰% {

margin-left: 0;

}

۳۹% {

margin-left: 0;

}

۴۰% {

margin-left: -1px;

}

۴۰٫۵% {

margin-left: 1px;

}

۴۱% {

margin-left: 0;

}

۱۰۰% {

margin-left: 0;

}

@keyframes planet-bump {

۰% {

margin-left: 0;

}

۳۹% {

margin-left: 0;

}

۴۰% {

margin-left: -1px;

}

۴۰٫۵% {

margin-left: 1px;

}

۴۱% {

margin-left: 0;

}

۱۰۰% {

margin-left: 0;

}

@-webkit-keyframes flag-pole {

۰% {

top: -57px;

}

۴۸% {

top: -57px;

}

۵۴% {

top: -77px;

}

۹۰% {

top: -77px;

}

۹۲% {

top: -57px;

}

۱۰۰% {

top: -57px;

}

@keyframes flag-pole {

۰% {

top: -57px;

}

۴۸% {

top: -57px;

}

۵۴% {

top: -77px;

}

۹۰% {

top: -77px;

}

۹۲% {

top: -57px;

}

۱۰۰% {

top: -57px;

}

@-webkit-keyframes flag-unfurl {

۰% {

width: 0;

}

۵۵% {

width: 0;

}

۶۰% {

width: 14px;

}

۹۰% {

width: 14px;

}

۱۰۰% {

width: 14px;

}

@keyframes flag-unfurl {

۰% {

width: 0;

}

۵۵% {

width: 0;

}

۶۰% {

width: 14px;

}

۹۰% {

width: 14px;

}

۱۰۰% {

width: 14px;

}

۳D cube wave .3 ( موج جعبه های سه بعدی )

جلو و عقب رفتن چند جعبه سه بعدی. حتما این انیمیشن را امتحان کنید.

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

کد HTML

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

کد CSS

body {

margin: 0;

padding: 0;

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

transform-style: preserve-3d;

-webkit-perspective: 600;

perspective: 600;

}

.container {

width: 350px;

margin: 30vh auto;

-webkit-transform: rotateX(-20deg) rotateY(-30deg) translate3d(0, 0, 0);

transform: rotateX(-20deg) rotateY(-30deg) translate3d(0, 0, 0);

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

transform-style: preserve-3d;

}

.block {

width: 50px;

height: 50px;

position: relative;

float: left;

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

transform-style: preserve-3d;

}

.face {

width: 50px;

height: 50px;

position: absolute;

box-sizing: border-box;

}

.left {

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

transform-origin: 0% 50%;

-webkit-animation: left 1s ease-in-out alternate infinite;

animation: left 1s ease-in-out alternate infinite;

background: #373C94;

}

.right {

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

transform-origin: 100% 50%;

-webkit-animation: right 1s ease-in-out alternate infinite;

animation: right 1s ease-in-out alternate infinite;

background: #373C94;

}

.front {

-webkit-animation: front 1s ease-in-out alternate infinite;

animation: front 1s ease-in-out alternate infinite;

background: #5287A5;

}

.back {

-webkit-transform: translateZ(-50px);

transform: translateZ(-50px);

background: #5287A5;

}

.top {

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

transform-origin: 50% 0%;

-webkit-animation: top 1s ease-in-out alternate infinite;

animation: top 1s ease-in-out alternate infinite;

background: #81C8A8;

}

.bottom {

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

transform-origin: 50% 100%;

-webkit-animation: bottom 1s ease-in-out alternate infinite;

animation: bottom 1s ease-in-out alternate infinite;

background: #81C8A8;

}

@-webkit-keyframes left {

۰% {

width: 50px;

-webkit-transform: rotateY(90deg) translateX(0);

transform: rotateY(90deg) translateX(0);

}

۱۰۰% {

width: 110px;

-webkit-transform: rotateY(90deg) translateX(-60px);

transform: rotateY(90deg) translateX(-60px);

}

@keyframes left {

۰% {

width: 50px;

-webkit-transform: rotateY(90deg) translateX(0);

transform: rotateY(90deg) translateX(0);

}

۱۰۰% {

width: 110px;

-webkit-transform: rotateY(90deg) translateX(-60px);

transform: rotateY(90deg) translateX(-60px);

}

@-webkit-keyframes right {

۰% {

width: 50px;

-webkit-transform: rotateY(-90deg) translateZ(0) translateX(0);

transform: rotateY(-90deg) translateZ(0) translateX(0);

}

۱۰۰% {

width: 110px;

-webkit-transform: rotateY(-90deg) translateZ(60px) translateX(60px);

transform: rotateY(-90deg) translateZ(60px) translateX(60px);

}

@keyframes right {

۰% {

width: 50px;

-webkit-transform: rotateY(-90deg) translateZ(0) translateX(0);

transform: rotateY(-90deg) translateZ(0) translateX(0);

}

۱۰۰% {

width: 110px;

-webkit-transform: rotateY(-90deg) translateZ(60px) translateX(60px);

transform: rotateY(-90deg) translateZ(60px) translateX(60px);

}

@-webkit-keyframes bottom {

۰% {

height: 50px;

-webkit-transform: rotateX(90deg) translateY(0);

transform: rotateX(90deg) translateY(0);

top: 0;

}

۱۰۰% {

height: 110px;

-webkit-transform: rotateX(90deg) translateY(60px);

transform: rotateX(90deg) translateY(60px);

top: -60px;

}

@keyframes bottom {

۰% {

height: 50px;

-webkit-transform: rotateX(90deg) translateY(0);

transform: rotateX(90deg) translateY(0);

top: 0;

}

۱۰۰% {

height: 110px;

-webkit-transform: rotateX(90deg) translateY(60px);

transform: rotateX(90deg) translateY(60px);

top: -60px;

}

@-webkit-keyframes top {

۰% {

height: 50px;

-webkit-transform: rotateX(-90deg) translateY(0);

transform: rotateX(-90deg) translateY(0);

}

۱۰۰% {

height: 110px;

-webkit-transform: rotateX(-90deg) translateY(-60px);

transform: rotateX(-90deg) translateY(-60px);

}

@keyframes top {

۰% {

height: 50px;

-webkit-transform: rotateX(-90deg) translateY(0);

transform: rotateX(-90deg) translateY(0);

}

۱۰۰% {

height: 110px;

-webkit-transform: rotateX(-90deg) translateY(-60px);

transform: rotateX(-90deg) translateY(-60px);

}

@-webkit-keyframes front {

۰% {

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

۱۰۰% {

-webkit-transform: translateZ(60px);

transform: translateZ(60px);

}

@keyframes front {

۰% {

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

۱۰۰% {

-webkit-transform: translateZ(60px);

transform: translateZ(60px);

}

.block:nth-of-type(6n-5) > .face {

-webkit-animation-delay: 0.15385s;

animation-delay: 0.15385s;

}

.block:nth-of-type(6n-4) > .face {

-webkit-animation-delay: 0.30769s;

animation-delay: 0.30769s;

}

.block:nth-of-type(6n-3) > .face {

-webkit-animation-delay: 0.46154s;

animation-delay: 0.46154s;

}

.block:nth-of-type(6n-2) > .face {

-webkit-animation-delay: 0.61538s;

animation-delay: 0.61538s;

}

.block:nth-of-type(6n-1) > .face {

-webkit-animation-delay: 0.76923s;

animation-delay: 0.76923s;

}

.block:nth-of-type(6n) > .face {

-webkit-animation-delay: 0.92308s;

animation-delay: 0.92308s;

}

.block:nth-of-type(6n+1) > .face {

-webkit-animation-delay: 1.07692s;

animation-delay: 1.07692s;

}

.block:nth-of-type(6n+8) > .face {

-webkit-animation-delay: 1.23077s;

animation-delay: 1.23077s;

}

.block:nth-of-type(6n+15) > .face {

-webkit-animation-delay: 1.38462s;

animation-delay: 1.38462s;

}

.block:nth-of-type(6n+22) > .face {

-webkit-animation-delay: 1.53846s;

animation-delay: 1.53846s;

}

.block:nth-of-type(6n+29) > .face {

-webkit-animation-delay: 1.69231s;

animation-delay: 1.69231s;

}

.block:nth-of-type(6n+36) > .face {

-webkit-animation-delay: 1.84615s;

animation-delay: 1.84615s;

}

.block:nth-of-type(6n+43) > .face {

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

.block:nth-of-type(1) {

display: none;

}

نوشته چند انیمیشن جالب با CSS که شما باید ببینید ( قسمت سوم ) اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses