Home/ Questions/Q 43
Next
Answered
ناشناس
پرسید: ۱۴۰۰/۷/۲۶ ۱۰:۵۱:۱۲ در:

چطور روی پس زمینه gradient یک المان، transition اعمال کنم؟

سلام دوستان. من یک المان توی صفحه وبم دارم که میخوام وقتی روش hover شد یک پس زمینه gradient روش اعمال بشه ولی هرکار میکنم اعمال نمیشه.اگر میشه لطفا راهنماییم کنید.ممنون.

 

کد CSS من:

.FeatureRow a{
    padding: 10px;
    display: block;
    width: 260px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0px 4px 8px #f5f5f5;
    background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
    background-repeat: repeat-x;
    transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
    background-image: linear-gradient(to bottom,#C00,#C0F);
}

 

background gradienttransition in css
Share

    سوالات مرتبط

    1 پاسخ

    1. بهترین پاسخ
      This answer was edited.

      سلام خدمت شما دوست عزیز!

      اگه شما بیای و از gradients برای پس زمینه یک عنصر استفاده کنی اونوقت دیگه نمیتونی از طریق transition اون رو تغییر بدی و برای این کار میتونی از opacity استفاد کنی و اون رو شبیه سازی کنی. میتونی کدت رو به صورت زیر اصلاح کنی.

       

      .FeatureRow {
    padding: 10px;
    display: block;
    position: relative;
    width: 260px;
    height: 70px;
    border-radius: 5px;
    background-image: linear-gradient(0deg,white,gray);
}

.FeatureRow:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(0deg,red,magenta);
    opacity: 0;
    transition: all 3s ease-in-out;
}

.FeatureRow:hover:after {
    opacity: 1;
}

       

      میتونی اینجا هم پیشنمایشش رو ببینی

      • 1

    یک جواب بگذارید

    You must login to add an answer.

    Need An Account,