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

نوشته شده توسط: adminدر تاریخ: تیر ۱۰, ۱۳۹۵در: آموزشی, انیمیشن, برنامه نویسی, طراحی وببازدید: 710 بازدید

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

Gooey button.1 ( یک منوی جذاب )

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

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

کد HTML

<h1>Gooey Menu</h1>

<h2>Using CSS and SVG Filters</h2>

<h3>By <a href=”http://codepen.io/lbebber”>Lucas Bebber</a></h3>

<h4>Version 1 – <a href=”http://codepen.io/lbebber/pen/RNgBPP” target=”_blank”>Version 2</a> – <a href=”http://codepen.io/lbebber/pen/pvwZJp” target=”_blank”>Version 3</a> – <a href=”http://codepen.io/lbebber/pen/rawQKR” target=”_blank”>Version 4</a></h4>

</label>

</nav>

<!– filters –>

<defs>

</filter>

</filter>

</defs>

</svg>

کد CSS

body {

background: #3f51b5;

color: white;

text-align: center;

}

a {

color: inherit;

}

h1, h2, h3, h4 {

margin: 0;

margin-bottom: 10px;

margin-top: 10px;

}

h1 {

font-size: 3em;

}

.menu {

-webkit-filter: url(“#shadowed-goo”);

filter: url(“#shadowed-goo”);

}

.menu-item, .menu-open-button {

background: #ff4081;

border-radius: 100%;

width: 80px;

height: 80px;

margin-left: -40px;

position: absolute;

top: 20px;

color: white;

text-align: center;

line-height: 80px;

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

transform: translate3d(0, 0, 0);

-webkit-transition: -webkit-transform ease-out 200ms;

transition: -webkit-transform ease-out 200ms;

transition: transform ease-out 200ms;

transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;

}

.menu-open {

display: none;

}

.hamburger {

width: 25px;

height: 3px;

background: white;

display: block;

position: absolute;

top: 50%;

left: 50%;

margin-left: -12.5px;

margin-top: -1.5px;

-webkit-transition: -webkit-transform 200ms;

transition: -webkit-transform 200ms;

transition: transform 200ms;

transition: transform 200ms, -webkit-transform 200ms;

}

.hamburger-1 {

-webkit-transform: translate3d(0, -8px, 0);

transform: translate3d(0, -8px, 0);

}

.hamburger-2 {

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

transform: translate3d(0, 0, 0);

}

.hamburger-3 {

-webkit-transform: translate3d(0, 8px, 0);

transform: translate3d(0, 8px, 0);

}

.menu-open:checked + .menu-open-button .hamburger-1 {

-webkit-transform: translate3d(0, 0, 0) rotate(45deg);

transform: translate3d(0, 0, 0) rotate(45deg);

}

.menu-open:checked + .menu-open-button .hamburger-2 {

-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);

transform: translate3d(0, 0, 0) scale(0.1, 1);

}

.menu-open:checked + .menu-open-button .hamburger-3 {

-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);

transform: translate3d(0, 0, 0) rotate(-45deg);

}

.menu {

position: absolute;

left: 50%;

margin-left: -190px;

padding-top: 20px;

padding-left: 190px;

width: 380px;

height: 250px;

box-sizing: border-box;

font-size: 20px;

text-align: left;

}

.menu-item:hover {

background: white;

color: #ff4081;

}

.menu-item:nth-child(3) {

-webkit-transition-duration: 70ms;

transition-duration: 70ms;

}

.menu-item:nth-child(4) {

-webkit-transition-duration: 130ms;

transition-duration: 130ms;

}

.menu-item:nth-child(5) {

-webkit-transition-duration: 190ms;

transition-duration: 190ms;

}

.menu-item:nth-child(6) {

-webkit-transition-duration: 250ms;

transition-duration: 250ms;

}

.menu-item:nth-child(7) {

-webkit-transition-duration: 310ms;

transition-duration: 310ms;

}

.menu-open-button {

z-index: 2;

-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

-webkit-transition-duration: 400ms;

transition-duration: 400ms;

-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);

transform: scale(1.1, 1.1) translate3d(0, 0, 0);

cursor: pointer;

}

.menu-open-button:hover {

-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);

transform: scale(1.2, 1.2) translate3d(0, 0, 0);

}

.menu-open:checked + .menu-open-button {

-webkit-transition-timing-function: linear;

transition-timing-function: linear;

-webkit-transition-duration: 200ms;

transition-duration: 200ms;

-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);

transform: scale(0.8, 0.8) translate3d(0, 0, 0);

}

.menu-open:checked ~ .menu-item {

-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

}

.menu-open:checked ~ .menu-item:nth-child(3) {

-webkit-transition-duration: 160ms;

transition-duration: 160ms;

-webkit-transform: translate3d(114.42548px, 11.48084px, 0);

transform: translate3d(114.42548px, 11.48084px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(4) {

-webkit-transition-duration: 240ms;

transition-duration: 240ms;

-webkit-transform: translate3d(77.18543px, 85.2491px, 0);

transform: translate3d(77.18543px, 85.2491px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(5) {

-webkit-transition-duration: 320ms;

transition-duration: 320ms;

-webkit-transform: translate3d(0.09158px, 114.99996px, 0);

transform: translate3d(0.09158px, 114.99996px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(6) {

-webkit-transition-duration: 400ms;

transition-duration: 400ms;

-webkit-transform: translate3d(-77.04956px, 85.37192px, 0);

transform: translate3d(-77.04956px, 85.37192px, 0);

}

.menu-open:checked ~ .menu-item:nth-child(7) {

-webkit-transition-duration: 480ms;

transition-duration: 480ms;

-webkit-transform: translate3d(-114.40705px, 11.66307px, 0);

transform: translate3d(-114.40705px, 11.66307px, 0);

}

Walking Robot.2 ( راه رفتن ربات )

این ربات راه می رود و راه می رود و راه می رود ( البته در جا ) !!!

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

کد HTML

<h1>For best view please use Chrome!</h1>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

کد CSS

/* ————————————-

* Style

* ————————————- */

body {

padding: 50px;

background: radial-gradient(1000px, #f6f5f1, #cec9b3);

background-repeat: no-repeat;

background-attachment: fixed;

}

h1 {

color: #9aacb1;

font: 24px Verdana, sans-serif;

font-weight: normal;

}

#robot {

width: 300px;

height: 620px;

margin: 50px auto 0;

position: relative;

transform-style: preserve-3d;

transform-origin: 50% 0 -30px;

animation: spin 60s linear infinite;

}

/*——- robot body ——- */

#head {

width: 60px;

height: 60px;

position: absolute;

top: 0;

left: 120px;

}

#torso {

width: 200px;

height: 230px;

position: absolute;

top: 80px;

left: 50px;

}

#left_arm {

width: 25px;

height: 240px;

position: absolute;

top: 110px;

left: 30px;

}

#right_arm {

width: 25px;

height: 240px;

position: absolute;

top: 110px;

right: 30px;

}

.upper_arm {

width: 25px;

height: 100px;

position: relative;

transform-style: preserve-3d;

}

.forearm {

width: 25px;

height: 120px;

margin-top: 20px;

}

#left_leg {

width: 30px;

height: 340px;

position: absolute;

top: 280px;

left: 85px;

}

#right_leg {

width: 30px;

height: 340px;

position: absolute;

top: 280px;

right: 85px;

}

.thigh {

width: 30px;

height: 150px;

position: relative;

transform-style: preserve-3d;

}

.lower_leg {

width: 30px;

height: 170px;

margin-top: 20px;

}

/*——- 3d effects ——- */

.front {

width: inherit;

height: inherit;

background: #9aacb1;

position: absolute;

}

.back {

width: inherit;

height: inherit;

background: #9aacb1;

position: absolute;

}

.left {

width: inherit;

height: inherit;

position: absolute;

background: #b7c4c7;

transform-origin: 0 0 0;

transform: rotateY(90deg);

}

.right {

width: inherit;

height: inherit;

position: absolute;

background: #b7c4c7;

transform-origin: 100% 0 0;

transform: rotateY(-90deg);

}

.top {

width: inherit;

background: #8ca0a6;

position: absolute;

transform-origin: 0 0 0;

transform: rotateX(-90deg);

}

.bottom {

width: inherit;

background: #8ca0a6;

position: absolute;

transform-origin: 0 0 0;

transform: rotateX(-90deg);

}

#head {

transform-style: preserve-3d;

transform-origin: 50% 0 -30px;

animation: torso 0.8s ease-in-out infinite alternate;

}

#head .back {

transform: translateZ(-60px);

}

#torso {

transform-style: preserve-3d;

transform-origin: 50% 0 -30px;

animation: torso 0.8s ease-in-out infinite alternate;

}

#torso .front {

width: 0;

height: 0;

background: none;

border-top: 230px solid #9aacb1;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

}

#torso .back {

width: 0;

height: 0;

background: none;

border-top: 230px solid #9aacb1;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

transform: translateZ(-60px);

}

#torso .left {

width: 60px;

height: 250px;

transform: rotateY(90deg) rotateX(23.5deg);

}

#torso .right {

width: 60px;

height: 250px;

transform: rotateY(-90deg) rotateX(23.5deg);

right: 0;

}

#left_arm, #right_arm {

transform-style: preserve-3d;

transform-origin: 0 0 -10px;

animation: arm 0.8s ease-in-out infinite alternate;

}

#left_arm .back, #right_arm .back {

transform: translateZ(-25px);

}

#left_arm .top, #right_arm .top {

height: 25px;

}

#left_arm .bottom, #right_arm .bottom {

height: 25px;

bottom: -25px;

}

#right_arm {

animation-delay: 0.8s;

}

#right_arm .forearm {

animation-delay: 0.8s;

}

.forearm {

transform-style: preserve-3d;

transform-origin: 0 0 0;

animation: forearm 0.8s ease-in-out infinite alternate;

}

#left_leg, #right_leg {

transform-style: preserve-3d;

transform-origin: 0 0 -20px;

animation: leg 0.8s ease-in-out infinite alternate;

}

#left_leg .back, #right_leg .back {

transform: translateZ(-30px);

}

#left_leg .top, #right_leg .top {

height: 30px;

}

#left_leg .bottom, #right_leg .bottom {

height: 30px;

bottom: -30px;

}

#left_leg {

animation-delay: 0.8s;

}

#left_leg .lower_leg {

animation-delay: 0.8s;

}

.lower_leg {

transform-style: preserve-3d;

transform-origin: 0 0 0;

animation: lower_leg 0.8s ease-in-out infinite alternate;

}

/*——- animation ——- */

@keyframes spin {

۰% {

transform: rotateY(0deg);

}

۱۰۰% {

transform: rotateY(360deg);

}

@keyframes torso {

۰% {

transform: rotateY(-7deg);

}

۱۰۰% {

transform: rotateY(7deg);

}

@keyframes arm {

۰% {

transform: rotateX(-15deg) translateZ(-20px);

}

۱۰۰% {

transform: rotateX(20deg) translateZ(-20px);

}

@keyframes forearm {

۰% {

transform: rotateX(0deg);

}

۱۰۰% {

transform: rotateX(60deg);

}

@keyframes leg {

۰% {

transform: rotateX(-5deg) translateZ(-15px);

}

۱۰۰% {

transform: rotateX(25deg) translateZ(-15px);

}

@keyframes lower_leg {

۰% {

transform: rotateX(0deg) translateY(15px);

}

۱۰۰% {

transform: rotateX(-50deg) translateY(15px);

}

Flexing Pagination Arrows.3 ( عدد ها را اضافه و کم کنید )

شما می توانید با این انیمیشن به صفحات مختلف وب بروید با این تفاوت که از این کار لذت می برید.

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

کد HTML

کد CSS

body {

background: #33ab83;

}

button {

-webkit-appearance: none;

background: transparent;

border: 0;

outline: 0;

}

.paginate {

position: relative;

margin: 10px;

width: 50px;

height: 50px;

cursor: pointer;

transform: translate3d(0, 0, 0);

position: absolute;

top: 50%;

margin-top: -20px;

-webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));

}

.paginate i {

position: absolute;

top: 40%;

left: 0;

width: 50px;

height: 5px;

border-radius: 2.5px;

background: #fff;

transition: all 0.15s ease;

}

.paginate.left {

right: 58%;

}

.paginate.left i {

transform-origin: 0% 50%;

}

.paginate.left i:first-child {

transform: translate(0, -1px) rotate(40deg);

}

.paginate.left i:last-child {

transform: translate(0, 1px) rotate(-40deg);

}

.paginate.left:hover i:first-child {

transform: translate(0, -1px) rotate(30deg);

}

.paginate.left:hover i:last-child {

transform: translate(0, 1px) rotate(-30deg);

}

.paginate.left:active i:first-child {

transform: translate(1px, -1px) rotate(25deg);

}

.paginate.left:active i:last-child {

transform: translate(1px, 1px) rotate(-25deg);

}

.paginate.left[data-state=disabled] i:first-child {

transform: translate(-5px, 0) rotate(0deg);

}

.paginate.left[data-state=disabled] i:last-child {

transform: translate(-5px, 0) rotate(0deg);

}

.paginate.left[data-state=disabled]:hover i:first-child {

transform: translate(-5px, 0) rotate(0deg);

}

.paginate.left[data-state=disabled]:hover i:last-child {

transform: translate(-5px, 0) rotate(0deg);

}

.paginate.right {

left: 58%;

}

.paginate.right i {

transform-origin: 100% 50%;

}

.paginate.right i:first-child {

transform: translate(0, 1px) rotate(40deg);

}

.paginate.right i:last-child {

transform: translate(0, -1px) rotate(-40deg);

}

.paginate.right:hover i:first-child {

transform: translate(0, 1px) rotate(30deg);

}

.paginate.right:hover i:last-child {

transform: translate(0, -1px) rotate(-30deg);

}

.paginate.right:active i:first-child {

transform: translate(1px, 1px) rotate(25deg);

}

.paginate.right:active i:last-child {

transform: translate(1px, -1px) rotate(-25deg);

}

.paginate.right[data-state=disabled] i:first-child {

transform: translate(5px, 0) rotate(0deg);

}

.paginate.right[data-state=disabled] i:last-child {

transform: translate(5px, 0) rotate(0deg);

}

.paginate.right[data-state=disabled]:hover i:first-child {

transform: translate(5px, 0) rotate(0deg);

}

.paginate.right[data-state=disabled]:hover i:last-child {

transform: translate(5px, 0) rotate(0deg);

}

.paginate[data-state=disabled] {

opacity: 0.3;

cursor: default;

}

.counter {

text-align: center;

position: absolute;

width: 100%;

top: 50%;

margin-top: -15px;

font-size: 30px;

font-family: Helvetica, sans-serif;

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

color: #fff;

}

کد js

// basic paging logic to demo the buttons

var pr = document.querySelector(‘.paginate.left’);

var pl = document.querySelector(‘.paginate.right’);

pr.onclick = slide.bind(this, -1);

pl.onclick = slide.bind(this, 1);

var index = 0,

total = 5;

function slide(offset) {

index = Math.min(Math.max(index + offset, 0), total – 1);

document.querySelector(‘.counter’).innerHTML = (index + 1) + ‘ / ‘ + total;

pr.setAttribute(‘data-state’, index === 0 ? ‘disabled’ : ”);

pl.setAttribute(‘data-state’, index === total – 1 ? ‘disabled’ : ”);

}

slide(0);

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

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

مطالب مرتبط:

دوره آموزش پروژه محور ASP.NET MVC6 در قالب پروژه بی نظیر سیستم وبلاگدهی

مختصری از تاریخچه زبان C

درباره نویسنده

admin

مطالب مرتبط

تبلیغات هدفمند

پر بازدیدها

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

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

Gooey button.1 ( یک منوی جذاب )

کد HTML

کد CSS

Walking Robot.2 ( راه رفتن ربات )

کد HTML

کد CSS

Flexing Pagination Arrows.3 ( عدد ها را اضافه و کم کنید )

کد HTML

کد CSS

کد js

مطالب مرتبط:

دوره آموزش پروژه محور ASP.NET MVC6 در قالب پروژه بی نظیر سیستم وبلاگدهی

مختصری از تاریخچه زبان C

درباره نویسنده

admin

مطالب مرتبط

یادگیری ماشین در متلب – Ensemble Methods

دوره های آموزشی پربازدید سری اول

آموزش WPF در قالب پروژه ساخت بازی حدس بزن!

تبلیغات هدفمند

پر بازدیدها