• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
خصیصه ای برای تغیر رنگ یک تگ با سرعت کم
#1
آیا با سی اس اس میشه کاری کرد که رنگ یه تگ وقتی موس میره روش آروم آروم تغییر کنه؟
search کردم به نتیجه نرسیدم
Big Grin
  پاسخ
تشکر شده توسط :
#2
نه، از جاوا اسکریپت یا کتابخانه هایی مثل جی کوئری استفاده کنید.
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : newphp
#3
نقل قول:نه، از جاوا اسکریپت یا کتابخانه هایی مثل جی کوئری استفاده کنید.
چی داری میگی احسان. کی گفته با سی اس اس نمیشه؟ عزیزم باید از ویژگی animation و keyframes در css3 استفاده کنی. کافیه پراپرتی animation رو در سلکتور :hover اون المنت قرار بدی. اینجارم بخون http://css-tricks.com/snippets/css/webki...on-syntax/
غایب
  پاسخ
تشکر شده توسط : newphp undefined hamid_80386
#4
HeartHeartHeartHeart

دسدت درد نکنهههههههه
تعجب کردم دوستمون گفت نمیشه

خوشحالم کردی
  پاسخ
تشکر شده توسط :
#5
نقل قول:چی داری میگی احسان. کی گفته با سی اس اس نمیشه؟ عزیزم باید از ویژگی animation و keyframes در css3 استفاده کنی. کافیه پراپرتی animation رو در سلکتور :hover اون المنت قرار بدی. اینجارم بخون http://css-tricks.com/snippets/css/webki...on-syntax/

این CSS3 چه کارا که نمیکنه Big Grin.
ممنون، این موضوع رو نمیدونستم اما همون طور که میدونی متاسفانه یکی از دلایلی که زیاد سراغ امکانات CSS3 نمیرم اینه که توسط مرورگرهایی مثل IE لعنتی ساپورت نمیشه Sad و مجبور میشم از کتابخانه هایی مثل جی کوئری استفاده کنم. توی HTML5 هم همین بساط رو داریم
هر چیزی که در جستن آنی آنی...
غایب
  پاسخ
تشکر شده توسط : newphp
#6
اینی که نوشتم رو یه نگاهی میکنید ؟
کار نمیکنه
لطفا یه راهنمائی بکنید

کد:
@-webkit-keyframes rg{
    frome{background:#1589FF;}
    to{background:#3BB9FF;}
    
    }
@-moz-keyframes rg{
    frome{background:#1589FF;}
    to{background:#3BB9FF;}
    }    
@-ms-keyframes rg{
    frome{background:#1589FF;}
    to{background:#3BB9FF;}
    
    }
@-o-keyframes rg{
    frome{background:#1589FF;}
    to{background:#3BB9FF;}
    
    }
                
#smt{
    margin-bottom:20px;
    margin-left:150px;
    height:35px;
    background-color:#1589FF;
    /*background:-webkit-linear-gradient(top, #3BB9FF, #1589FF );
    background:-moz-linear-gradient(top, #3BB9FF, #1589FF );*/
    color:#FFF;
    border-radius:10px;
    box-shadow:#CCC;
}
    
#smt:hover{
    -webkit-animation: rg 5s infinite;
    -moz-animation: rg 5s infinite;
    -ms-animation-rg 5s infinite;
    background-color:#1589FF;
    
    /*background:-webkit-linear-gradient(top, #306EFF, #1589FF );
    background:-moz-linear-gradient(top, #306EFF, #1589FF );*/*/
    color:#FFF;
    border-radius:5px;
    
    }
  پاسخ
تشکر شده توسط :
#7
نقل قول:ممنون، این موضوع رو نمیدونستم اما همون طور که میدونی متاسفانه یکی از دلایلی که زیاد سراغ امکانات CSS3 نمیرم اینه که توسط مرورگرهایی مثل IE لعنتی ساپورت نمیشه Sad و مجبور میشم از کتابخانه هایی مثل جی کوئری استفاده کنم. توی HTML5 هم همین بساط رو داریم
کافیه کتابخونه modernizr رو نصب کنی تا برای همیشه از شر ie لعنتی خلاص بشی.

نقل قول:اینی که نوشتم رو یه نگاهی میکنید ؟
کار نمیکنه
ویرایشش کردم. غلط املایی داشتی. ms و o پشتیبانی نمیکنن. درضمن از یک IDE استفاده کن.
کد:
@-webkit-keyframes rg{
    from{background:#1589FF;}
    to{background:#3BB9FF;}
    
    }
@-moz-keyframes rg{
    from{background:#1589FF;}
    to{background:#3BB9FF;}
    }    
                
#smt{
    margin-bottom:20px;
    margin-left:150px;
    height:35px;
    background-color:#1589FF;
    /*background:-webkit-linear-gradient(top, #3BB9FF, #1589FF );
    background:-moz-linear-gradient(top, #3BB9FF, #1589FF );*/
    color:#FFF;
    border-radius:10px;
    box-shadow:#CCC;
}
    
#smt:hover{
    -webkit-animation: rg 5s infinite;
    -moz-animation: rg 5s infinite;
    animation: rg 5s infinite;
    color:#FFF;
    border-radius:5px;
    
    }
غایب
  پاسخ
تشکر شده توسط : undefined
#8
(۱۳۹۱ تير ۲۳, ۰۱:۱۳ ق.ظ)cyletech نوشته:
نقل قول:ممنون، این موضوع رو نمیدونستم اما همون طور که میدونی متاسفانه یکی از دلایلی که زیاد سراغ امکانات CSS3 نمیرم اینه که توسط مرورگرهایی مثل IE لعنتی ساپورت نمیشه Sad و مجبور میشم از کتابخانه هایی مثل جی کوئری استفاده کنم. توی HTML5 هم همین بساط رو داریم
کافیه کتابخونه modernizr رو نصب کنی تا برای همیشه از شر ie لعنتی خلاص بشی.
یه توضیحی راجع بهش بده بیشتر توجیه بشیم

نقل قول:اینی که نوشتم رو یه نگاهی میکنید ؟
کار نمیکنه
ویرایشش کردم. غلط املایی داشتی. ms و o پشتیبانی نمیکنن. درضمن از یک IDE استفاده کن.
کد:
@-webkit-keyframes rg{
    from{background:#1589FF;}
    to{background:#3BB9FF;}
    
    }
@-moz-keyframes rg{
    from{background:#1589FF;}
    to{background:#3BB9FF;}
    }    
                
#smt{
    margin-bottom:20px;
    margin-left:150px;
    height:35px;
    background-color:#1589FF;
    /*background:-webkit-linear-gradient(top, #3BB9FF, #1589FF );
    background:-moz-linear-gradient(top, #3BB9FF, #1589FF );*/
    color:#FFF;
    border-radius:10px;
    box-shadow:#CCC;
}
    
#smt:hover{
    -webkit-animation: rg 5s infinite;
    -moz-animation: rg 5s infinite;
    animation: rg 5s infinite;
    color:#FFF;
    border-radius:5px;
    
    }

IDE چیه؟

همینجوری هم کار نمیکنه
  پاسخ
تشکر شده توسط :
#9
نقل قول:IDE چیه؟
یه محیط برنامه/کد نویسی واسه توسعه دهنده هاست. ویژگی های خاصی داره. مثلا اگر توی css دستوری رو اشتباه بنویسی اون بهت هشدار میده. یا مثلا اول اسم یه پراپرتی رو میزنی لیستشو بهت میده و از این حرفا. خلاصه کمتر اشتباه میکنی.

نقل قول:همینجوری هم کار نمیکنه
کار میکنه جوگیر نشو خودم تستش کردم Big Grin شاید خودت نفهمیدی چی نوشتی. اون 5s یعنی 5 ثانیه طول میکشه رنگش تغییر کنه. چند ثانیه وایسا روش با موس بعد برو کنار ببین رنگش تغییر کرده دوباره بر میگرده به حالت اولیه.
غایب
  پاسخ
تشکر شده توسط : newphp
#10
(۱۳۹۱ تير ۲۳, ۰۱:۴۹ ق.ظ)cyletech نوشته:
نقل قول:IDE چیه؟
یه محیط برنامه/کد نویسی واسه توسعه دهنده هاست. ویژگی های خاصی داره. مثلا اگر توی css دستوری رو اشتباه بنویسی اون بهت هشدار میده. یا مثلا اول اسم یه پراپرتی رو میزنی لیستشو بهت میده و از این حرفا. خلاصه کمتر اشتباه میکنی.

نقل قول:همینجوری هم کار نمیکنه
کار میکنه جوگیر نشو خودم تستش کردم Big Grin شاید خودت نفهمیدی چی نوشتی. اون 5s یعنی 5 ثانیه طول میکشه رنگش تغییر کنه. چند ثانیه وایسا روش با موس بعد برو کنار ببین رنگش تغییر کرده دوباره بر میگرده به حالت اولیه.


راس میگی کار میکنه

چرا میدونم چی نوشتم ولی اولین بارمه توقع داشتم مثل hover که یهو رنگو عوض میکنه اینم عوض کنههه
هنو عادت نکردم دیگههه

یه چیزه دیگه من نمیخوام این برگرده به رنگ اولش یعنی تا موس روشه رنگش شروع به تغییر کنه

این بعد از 5 ثانیه بر میگرده به رنگ اولی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان