بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
13
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
5
تعیین اندازه و موقعیت عنصرها، در CSS
تعیین اندازه و موقعیت عنصرها، در CSS
4
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
3
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (links)، در CSS
لینک ها (links)، در CSS
5
رنگ ها، در CSS
رنگ ها، در CSS
1
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
مباحث عمومی، در CSS
مباحث عمومی، در CSS
8
×

دانلود فروشگاه اندروید کلیدستان

557

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

ایجاد یک تاخیر (delay)، هنگام استفاده از انتقال (transition) در CSS

قبلا مفهوم انتقال (transition) در CSS را شرح دادیم و گفتیم که با استفاده از مشخصه های مربوط به انتقال (transition) در CSS ، می توانیم یک سری تغییرات را به صورت تدریجی و مشابه انیمیشن، به عناصر صفحه اعمال کنیم. در این مبحث می خواهیم با مشخصه transition-delay آشنا شویم که می تواند یک مقدار زمان به عنوان تاخیر (delay)، قبل از اعمال تغییرات تدریجی، به وجود بیاورد.

به عنوان مثال، می خواهیم که برای یک عنصر div که پس زمینه آن رنگی است، هنگامی که کاربر موس خود را بر روی آن می برد، ابتدا 3 ثانیه تاخیر داشته باشیم و سپس، اندازه عرض عنصر div ، به تدریج بزرگتر شود. نتیجه نهایی به صورت زیر می باشد (موس خود را بر روی قسمت رنگی برده و لحظاتی صبر کنید) :

نتیجه :

Result

برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :


<html>
 
<head>
<style type="text/css">
div {
    width: 3em;
    height: 3em;
    background-color: red;
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 3s;
}
div:hover {
    width: 10em;
}                                        
</style>
</head>
 
<body>

<div>
</div>

</body>
</html>

همان طور که مشاهده می کنید، درون تگ body از صفحه HTML ، یک عنصر div ساخته ایم. کدهای CSS ، درون زوج تگ style نوشته شده اند.

به این بخش از کدهای CSS توجه کنید :


div {
    width: 3em;
    height: 3em;
    background-color: red;
    transition-property: width;
    transition-duration: 4s;
    transition-delay: 3s;
}

همان طور که مشاهده می کنید، برای عنصر div ، شش مشخصه تعریف کرده ایم. مشخصه width ، برای تعیین عرض عنصر div ، مشخصه height ، برای تعیین ارتفاع عنصر div و مشخصه background-color ، برای تعیین رنگ پس زمینه عنصر div می باشد (برابر رنگ قرمز). مشخصه transition-property در CSS ، برای اعمال تغییرات مورد نظرمان، به صورت تدریجی می باشد. همچنین دقت داشته باشید که مشخصه transition-property را به صورت زیر تعریف کرده ایم :


transition-property: width;

با این خط از کدهای CSS ، تعیین کرده ایم که تغییرات تدریجی، تنها باید برای مشخصه width اعمال شود.

مشخصه transition-duration ، تعیین می کند که تغییرات تدریجی، در چه مدت زمانی، اعمال شوند، مثلا ما در این کدها، زمان 4 ثانیه را در نظر گرفته ایم. transition-delay هم برابر 3 ثانیه در نظر گرفته شده است و بنابراین قبل از اعمال تغییرات تدریجی، 3 ثانیه تاخیر (delay) خواهیم داشت.

ادامه کدهای CSS ، به صورت زیر می باشد :


div:hover {
    width: 10em;
}

عبارت div:hover به این معنی است که مشخصه هایی که تعیین می کنیم، زمانی به عنصر div اعمال شوند که کاربر، موس خود را بر روی آن برده باشد. مشخصه width را برابر 10em تعیین کرده ایم که چون مقدار آن، با مقدار حالت عادی که مشخص کرده ایم، متفاوت است، بنابراین وقتی کاربر موس را بر روی عنصر div می برد، اندازه عرض آن، به تدریج افزایش می یابد.

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
جستجو در عنوان کلیدها :
جستجو توسط گوگل :
پرسیدن سوال :
ارسال نظر :
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن منو
۷۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
17
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
10
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5