رفتن به مطلب

کد o-transition.moz-transition.ms-transition.webkit-transition


پست های پیشنهاد شده

با سلام من از کد زیر برای کند کردن mouse hover روی یک div استفاده میکنم


-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;

وقتی بک گراند div از عکس استفاده میکنه دیگه وقتی موس میره روش اسلو نمیشه مشکل چیه؟

ویرایش شده توسط M.At
لینک به ارسال

عکس فقط در نمایشگر های وب کیت این خاصیت رو قبول می کنه (سافاری و گوگل کروم) مگر اینکه background-size تغییر کنه

لینک به ارسال

استاد فخار به نظر شما به چه صورت این منو رو درست کنم منوی آبی رنگ منظورم که در لینک زیر هست؟

http://www.templatemonster.com/demo/45593.html

منویی که مشاهده میکنید اول عکس هست وقتی با موس روی منو میریم بعد تبدیل به رنگ میشه و خیلی تقریبا اسلو هست به چه صورت این منو رو ایجاد کنم ؟

لینک به ارسال

لینکگی که دادید همه منوهاش آبی بود ولی من متوجه عکس نشدم

برای تبدیل آهسته عکس به رنگ


.nav li {
height:45px;
background:#369 url('images/bg.png') repeat-x scroll left 0%;
background-size:auto 45px;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.nav li:hover {
background-position:left 100%;
background-size:auto 0px;

}

لینک به ارسال

این منو رو منظورم هست استاد

و روی هر منو کلیک میکنید در هر صفحه که باشه رنگ منوی اون صفحه آبی پر رنگ میشه مثلا در صفحه BLOG باشیم رنگ منوی اون به آبی پر رنگ تبدیل میشه ؟ این عمل رو هم لطفا بگید باید چه کاری انجام بدم؟ ببینید من از اون کدی که دادیداستفاده کردم اما من میخوام به صورت اسلو شده عکس تغییر کنه منو رو خودتون مشاهده کنید متوجه میشید از اون کد استفاده کردم فقط در کروم نشون میده در فایر فاکس نمایش نمی ده به صورت اسلو در فایر فاکس باید دوتاشون رنگ باشن تا به صورت اسلو تغییر کنه این کدی که من استفاده میکنم


nav li > ul,
nav li > ol {
margin:0;
list-style: none;

}
.main-navigation {
float: right;
}
.main-navigation li {
float:right;
font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
font-size: 15px;
text-align:center;
color: #fff;
}
.main-navigation li.default-menu,
li.default-menu {
display: none;

}
.main-navigation a {
background: transparent url(images/Menu-Image.png) no-repeat top center;
background-color:#89D2FD;
width:189px;
float: right;
display: block;
line-height:70px;
margin: 0 0px 0 0px;

}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {
background: url(images/Menu-Image-hover.png) no-repeat top center;
background-color:#248FCA;
width:189px;
line-height:70px;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;

}

12.jpg

ویرایش شده توسط M.At
لینک به ارسال

http://cdpn.io/ucaxj

بستگی به نحوه استفاده شما داره و الا عمل می کنه

سئوال دومتون رو در تایپیک جدا بپرسید مبحثش کاملا جداست

لینک به ارسال

این صفحه ای که شما دادید عمل میکنه؟ درسته آیا از کد من استفاده کردید؟ یا کدی که خودتون گداشته بودید؟ اما برای من به صورت اسلو نیست نمی دونم چرا؟ چه کاری باید انجام بدم تا بفهمم مشکل چیه؟

میشه این صفحه ای که دادی رو کدش رو قرار بدید؟ شاید من یک جا اشتباهی کردم که برای من به نمایش در نمی یاد

ویرایش شده توسط M.At
لینک به ارسال

زیر صفحه روی editpen بزنید و کدها را ببینید با دو کد مختلف ساخته شده خط بالا با تصویره و خط پایین با کدهای css

https://gist.github.com/anonymous/05f98a05eec9701b2998

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...