ورود

View Full Version : نمایش لینک با عکس پس زمینه با css3


leonpersian
دوشنبه 23 بهمن 1391, 23:11 عصر
دوستان من با CSS3 میخوام یک لینک داشته باشم که یک عکس پس زمینه ای داشته باشه وقتی موس رفت روش خیلی آروم عکس بعدی نمایش داده بشه
kiqhoo
دوشنبه 23 بهمن 1391, 23:18 عصر
<html>
< head>
< style type='text/css'>
a.rollover{background-image:url('blueSquare.gif'); width:20px; height:20px;}
a.rollover:hover{background-image:url('redSquare.gif'); width:20px; height:20px;}
< /style>
< /head>
< body>
< a class='rollover' href='#'></a>
< /body>
< /html>
leonpersian
دوشنبه 23 بهمن 1391, 23:28 عصر
عزیزم اینی که شما دادید و من بلد بودم
من نوشتم به آرومی عکس دوم نمایش داده بشه (CSS 3.0)
SlowCode
سه شنبه 24 بهمن 1391, 00:16 صبح
سلام
شما واسه hover اون لینک کد عوض شدن پس زمینه رو بنویس بعد واسه حالت پیشفرض یا اصلی اینو بنویس:
a{transition:all ease 1s}
البته باید واسه -moz و -webkit هم بنویسی.
leonpersian
سه شنبه 24 بهمن 1391, 12:17 عصر
ببخشید اما نشد
soroush.r70
سه شنبه 24 بهمن 1391, 13:39 عصر
transition:all 0.765s ease-in-out;
-webkit-transition:all 0.765s ease-in-out;
-moz-transition:all 0.765s ease-in-out;
leonpersian
چهارشنبه 25 بهمن 1391, 11:45 صبح
میشه یه مثال بدید چون هر کاری می کنم نمیشه
SlowCode
چهارشنبه 25 بهمن 1391, 12:59 عصر
بفرما:

<html>
<head>
<style>
.link{background-color:#CCC;width:100px;height:100px;transition:all ease 1s;-webkit-transition:all ease 1s;-moz-transition:all ease 1s}
.link:hover{background-color:#5C5}
</style>
</head>
<body>
<div class="link"></div>
</body>
</html>
من رنگش رو تغییر دادم تو عکسش رو عوض کن فرقی نداره چون واسه transition نوشتیم all همه تغییرات رو با این افکت انجام میده.