Transitions در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

Css Transition در نسخه قبلی Css3 اگر میخواستیم یک افکت بر روی متن یا تصویر اعمال کنیم باید از کدهای جاوا استفاده می کردیم اما در Css3  ویژگی اضافه شده با نام Transitions که به راحتی این امکان را به طراح میدهد یک تصویر را بزرگ ، وقتی ماوس روی یک کادر قرار می گیرد اندازه آن بزرگتر شده یا افکت های دیگر ، را بدون استفاده از جاوا ایجاد کند . 
با استفاده از CSS Transitions شما می توانید بدون استفاده از فلش یا جاواسکریپت با hover المنت خود را از یک حالت به حالت دیگری تغییر دهید .
این ویژگی در اینترنت اکسپلورر 10 ، فایرفاکس ، کروم ، سافاری و اوپرا پشتیبانی می شود  .
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .

 CSS Transitions باعث می شود حالت یک المنت به حالت دیگری تغییر کند . 
برای انجام اینکار ابتدا باید دو مرحله زیر را انجام بدهید .  


»»»»   نوع ویژگی ای که میخواهید آن را تغییر حالت دهید مثلاً width (اگر میخواهید همه ویژگی ها تغییر کند all استفاده کنید)
»»»»  مدت زمان تغییر حالت ها

 

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

 

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


<!DOCTYPE html>
<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;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

 



لینک دمو (بعد از کلیک ماوس را بر روی کادر قرمز نگهدارید)

تغییرات چندگانه
با جدا کردن ویژگی ها و زمان با کاما میتوانید همزمان چند تغییر برای چند ویژگی با زمان های مختلف تعریف کنید :


<!DOCTYPE html>
<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;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
}
</style>
</head>
<body>
بر روی کادر ماوس را نگهدارید
</body>
</html>

 



لینک دمو (بعد از کلیک ماوس را بر روی کادر قرمز نگهدارید)

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:47

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا