تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

یکشنبه 10 آذر 1392

آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته

نویسنده: امیر حسینی   

انیمیشن در Css3


anim03

یکی دیگر از کاربردی ترین و اصلی ترین قابلیت هایی که به css3 اضافه شده ، ساخت انیمیشن می باشد  . اگر بهآموزش های طراحی قالب دقت کرده باشید ، برای ساخت یک تصویر انیمیشن باید از یک سری نرم افزار یا با استفاده از جی کوئری اینکار صورت میگرفت که کمی کار زمان بر و سختی بود اما با استفاده از ویژگی Animation به راحتی می توانیم به تصاویر و المنت های دلخواه ، با انیمیشن افکت بدهیم .
تا به حال با نرم افزار فتوشاپ و فلش بنر طراحی کرده اید ؟ برای حرکت دادن اجزا همیشه باید یک فریم ایجاد کنیم . در Css3 css3 نیز قبل از ساخت انیمیشن باید با Keyframe آشنا شوید .
Keyframe چیست ؟ بوسیله Keyframe مشخص می کنیم که در چه زمانی باید چه تغییراتی درون Css انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .
اینترنت اکسپلورر 10 , موزیلا یا همان فایرفاکس ، سافاری ، کروم و اوپرا از این ویژگی پشتیبانی می کنند.
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد . 
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند. 
اپرا برای این ویژگی نیاز به پیشوند -o- دارد . 


به دستورات زیر توجه کنید


@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

 

Animation در Css3

پس از آنکه حرکت مورد نظر را با @keyframes تعریف کردید نوبت آن است که آن را که نامش مثلاً Animation1 است ، به یک div متصل کنید .

برای انجام دادن آن شما باید دو کار انجام دهید :
نام انیمیشن را تعریف کنید مثلاً Animation1
مدت زمان انیمیشن
به این نکته دقت داشته باشید ، در صورتیکه هیچ زمانی داده نشود هیچ افکتی بر روی کادر یا تصویر مورد نظر اعمال نمی شود .

1
2
3
4
5
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}


کد اصلی قسمت بالا . (کد اصلی را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>به کادر زیر دقت کنید</p>
<div></div>
</body>
</html>

دمو این قسمت

 

در CSS Animation چه خبر است ؟

انیمیشن افکتی است که نشان دهنده تغییر حالت یک المنت به حالت دیگر است .
شما هرچقدر که بخواهید می توانید حالت را تغییر دهید .
تغییرات را میتوانید به صورت درصد یا کلمه های کلیدی from و to بیان کنید .
0% ابتدای انیمیشن و 100% انتهای آن است .

به مثال های زیر توجه کنید .(کد اصلی را در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
به این مثال دقت کنید
<div></div>
</body>
</html>

دمو این قسمت

 یک مثال دیگر

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
به مثال زیر توجه کنید
<div></div>
</body>
</html>

دمو این قسمت

به مثال زیر توجه کنید


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
به مثال زیر توجه کنید
<div></div>
</body>
</html>

دمو این قسمت


نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
How long does Achilles tendonitis last for?
شنبه 14 مرداد 1396 10:54 ب.ظ
My spouse and I stumbled over here by a different website
and thought I might check things out. I like what I see so i am
just following you. Look forward to exploring your web page repeatedly.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
wallgvaxeqgcpt.exteen.com
جمعه 13 مرداد 1396 12:03 ب.ظ
This is the right site for anyone who would like to understand this topic.
You realize a whole lot its almost hard to argue with you (not that
I actually would want to…HaHa). You definitely put a fresh spin on a
topic that has been discussed for a long time. Great stuff, just excellent!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Indira
دوشنبه 9 مرداد 1396 09:41 ب.ظ
I blog frequently and I seriously thank you for your information. This great article has really peaked my
interest. I'm going to bookmark your website and keep checking for
new details about once per week. I opted in for your Feed too.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
free std testing clinics near me
دوشنبه 5 تیر 1396 04:00 ب.ظ
بسیار چلیپا از خود نوشتن در حالی که ظاهر
شدن دلنشین در آغاز آیا واقعا کار بسیار خوب با من پس از برخی
از زمان. جایی درون پاراگراف شما در واقع موفق به من مؤمن متاسفانه تنها برای while.
من با این حال کردم مشکل خود را با فراز در منطق و یک ممکن است را خوب
به پر همه کسانی معافیت. در این رویداد شما در واقع که می
توانید انجام من را قطعا بود مجذوب.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Aurora
دوشنبه 25 اردیبهشت 1396 05:20 ب.ظ
I don't even know the way I finished up right here, however I thought this post
used to be good. I don't understand who you might be but definitely you are going to a famous blogger for those who aren't already.
Cheers!
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
BHW
پنجشنبه 24 فروردین 1396 04:04 ق.ظ
Hi there, You've done an incredible job. I will certainly digg it and personally recommend to my
friends. I am sure they'll be benefited from this web site.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
manicure
یکشنبه 20 فروردین 1396 08:24 ق.ظ
I'm gone to convey my little brother, that he should also pay a visit this website on regular basis to obtain updated from hottest reports.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com